显示包含每月列出的项目的数据表

Question

假设我有一个包含 N 项的数据表。

默认情况下，datatables 加载 X 个元素（25、50 或 100）

我希望默认情况下只加载当前月份的条目（例如现在我们只能看到 11 月的条目）

同样，通过两个按钮，加载上个月或下个月的条目。

我found this，但时间范围必须由用户手动指定。

是否可以在用户不必输入日期范围的情况下实现类似的功能？也就是说，只需单击下一个或上一个即可更改月份。

Answer 1

JavaScript Date() function will get the current date并且有修改日期的功能

因此您的按钮将设置如下参数：

const today = new Date();
const previousMonth = today.setMonth(today.getMonth() - 1).toString();
const nextMonth = today.setMonth(today.getMonth() + 1).toString();

Answer 2

这是一种方法，它展示了一种组合您的问题所需的各种元素的方法：

year/month 显示和导航的简单控件：

<div id="month-year">
  <button id="prev" type="button">&lt;</button>
  <span id="ym-filter" style="padding: 0 10px;">foo</span>
  <button id="next" type="button">&gt;</button>
</div>

这可以用或多或少的任何你喜欢的东西代替。这只是一个基本的演示。

为 year/month 显示操作“上一个”和“下一个”值的一些逻辑。

我为此使用 Luxon 库，作为页面资源包含在内：

<script src="https://cdn.jsdelivr.net/npm/luxon@2.0.2/build/global/luxon.min.js"></script>

并且：

var selectedYearMonth = luxon.DateTime.now();

我还添加了将所选日期递增和递减一个月的功能；并格式化日期的显示（见下文）。

对于过滤逻辑，我的方法基于您在问题中链接到的the example。

我通过将过滤逻辑基于字符串比较来作弊。因此，我采用数据表中显示的日期字符串，并切掉日期部分以提供 year/month 字符串。

这简化了过滤逻辑。但如果您愿意，也可以使用日期对象。

一个例子：

这是一个可运行的演示，它显示了所有内容的组合：

$(document).ready(function() {

  // the Luxon date object for the selected year-month filter:
  var selectedYearMonth = luxon.DateTime.now();

  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var filter = selectedYearMonth.toFormat( 'yyyy/MM' );
      // values from the 5th column (index 4), trimmed to 'yyyy/MM' 
      var date = data[4].substring(0, 7);  
      return date === filter;
    }
  );

  var table = $('#example').DataTable( {
    pageLength: -1,
    dom: 'frt<"dt-center">',
    initComplete: function( settings, json ) {

      // build the year-month controls:
      $('div.dt-center').append('<div id="month-year">' + 
          '<button id="prev" type="button">&lt;</button>' + 
          '<span id="ym-filter" style="padding: 0 10px;">foo</span>' + 
          '<button id="next" type="button">&gt;</button></div>');

      setYearMonthDisplay(selectedYearMonth);

      $( "#prev" ).on( "click", function() {
        changeYearMonth(-1);
        table.draw();
      });

      $( "#next" ).on( "click", function() {
        changeYearMonth(1);
        table.draw();
      });

    }

  } );

  function setYearMonthDisplay(date) {
    $('#ym-filter').text( date.toLocaleString({ month: 'long', year: 'numeric' }) );
  }

  function changeYearMonth(i) {
    selectedYearMonth = selectedYearMonth.plus({ months: i} );
    setYearMonthDisplay( selectedYearMonth );
  }
  
} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <script src="https://cdn.jsdelivr.net/npm/luxon@2.0.2/build/global/luxon.min.js"></script>

  <style>
    .dt-center {
      padding-top: 10px;
      width:100%;
      display: flex;
      justify-content: center;
    }
  </style>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2021/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2021/07/25</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2019/01/12</td>
                <td>,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2022/03/29</td>
                <td>3,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2018/11/28</td>
                <td>2,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2022/12/02</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2022/08/06</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2020/10/14</td>
                <td>7,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2019/09/15</td>
                <td>5,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2018/12/13</td>
                <td>3,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2018/12/19</td>
                <td>,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2023/03/03</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2018/10/16</td>
                <td>0,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2022/12/18</td>
                <td>3,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2020/03/17</td>
                <td>5,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2022/11/27</td>
                <td>8,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2020/06/09</td>
                <td>5,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2019/04/10</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2022/10/13</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2022/09/26</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2021/09/03</td>
                <td>5,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2019/06/25</td>
                <td>5,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2021/12/12</td>
                <td>6,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>23</td>
                <td>2020/09/20</td>
                <td>,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2019/10/09</td>
                <td>,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2020/12/22</td>
                <td>,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2020/11/14</td>
                <td>7,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2021/06/07</td>
                <td>6,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2020/03/11</td>
                <td>0,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2021/08/14</td>
                <td>3,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>37</td>
                <td>2021/06/02</td>
                <td>,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2019/10/22</td>
                <td>4,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2021/05/07</td>
                <td>5,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2018/10/26</td>
                <td>5,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2021/03/09</td>
                <td>4,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2019/12/09</td>
                <td>,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2018/12/16</td>
                <td>4,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2020/02/12</td>
                <td>9,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2019/02/14</td>
                <td>2,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2018/12/11</td>
                <td>6,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2018/09/26</td>
                <td>5,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2021/02/03</td>
                <td>4,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2021/05/03</td>
                <td>3,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2019/08/19</td>
                <td>9,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2023/08/11</td>
                <td>,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2019/07/07</td>
                <td>,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2022/04/09</td>
                <td>8,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2020/01/04</td>
                <td>5,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2022/06/01</td>
                <td>5,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2023/02/01</td>
                <td>,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2021/12/06</td>
                <td>5,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2021/11/21</td>
                <td>6,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2019/02/27</td>
                <td>3,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2021/11/14</td>
                <td>,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2018/11/13</td>
                <td>3,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2021/06/27</td>
                <td>3,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2021/01/25</td>
                <td>2,000</td>
            </tr>
        </tbody>
    </table>

</div>



</body>
</html>

显示包含每月列出的项目的数据表

Show datatables with monthly listed items

datatables