如何修复表格中的数据范围过滤器？

Question

我正在使用脚本来过滤开始/结束日期之间的日期，但它不会在我的表中执行任何操作。            <script>                $(document).ready(function () {                    $(function () {                        var start = moment("2019-10-01 00:00:00");                        var end = moment("2019-10-31 23:59:59");                        function cb(start, end) {                            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));                        }                        $('#reportrange').daterangepicker({                            startDate: start,                            endDate: end,                            ranges: {                            }                        }, cb);                        cb(start, end);                    });                    $('#reportrange').on('apply.daterangepicker', function (ev, picker) {                        var start = picker.startDate.format('YYYY-MM-DD');                        var end = picker.endDate.format('YYYY-MM-DD');                        console.log("-----------------------------");                        $.fn.dataTable.ext.search.push(                            function (settings, data, dataIndex) {                                var min = new Date(start);                                var max = new Date(end);                                var startDate = new Date(data[1]);                                console.log(startDate + " <= " + max + " --- " + (startDate <= max));这是表格，我希望它可以过滤带有开始和结束日期的日期，但它根本不做任何事情

Answer 1

现在这实际上是您问题的答案：我在查看https://www.daterangepicker.com/和 moment.js 文档后重建了您的逻辑。

行的过滤可以在 daterangepicker 的回调函数中完成，如下所示。仅当表行的日期介于日期范围选择器的所选开始日期和结束日期之间时，才会显示该行。如果您真的想在选择后查看所选范围，您还应该将 daterangepicker 字段设为一个<input type="text">字段。

$('#reportrange').daterangepicker({startOfWeek: 'monday'},function(start,end){

  $('#mydataTable tr').each((i,tr)=>{                 // go through each tr of table body:

   var dt=moment($('td:eq(4)',tr).text(),'MM/DD/YY'); // parse the date in column 5 using moment.js

   $(tr).toggle( start<dt && dt<end );                // if dt is between start and end then show, else hide

  })

});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" id="reportrange">

<div class="card-body">

 <div id="tablas">

  <div id="var receive">

   <div class="table-striped">

    <table class="table table-bordered" width="100%" cellspacing="0">

     <thead align="center">

      <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>Date</th></tr>

     </thead>

     <tbody id="mydataTable">

      <tr>

       <td align="center">1</td>

       <td>987654 UserName</td>

       <td align="center">Coins</td>

       <td align="right">$1,000.00</td>

       <td align="center">07/16/19</td>

       <td align="center">

           <form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

       </td>

      </tr><tr>

       <td align="center">2</td>

       <td>123456 UserName</td>

       <td align="center">Coins</td>

       <td align="right">$1,000.00</td>

       <td align="center">10/16/19</td>

       <td align="center">

           <form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

       </td>

      </tr><tr>

       <td align="center">3</td>

       <td>007 somebody else</td>

       <td align="center">Coins</td>

       <td align="right">$100.00</td>

       <td align="center">10/20/19</td>

       <td align="center">

           <form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

       </td>

      </tr><tr>

       <td align="center">4</td>

       <td>789101 UserName</td>

       <td align="center">Coins</td>

       <td align="right">$3,210.00</td>

       <td align="center">11/07/19</td>

       <td align="center">

           <form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

       </td>

      </tr>

      </tbody>

    </table>

   </div>

  </div>

 </div>

</div>

Answer 2

下面的代码使用 jQuery 并说明了排序，以及基于表行中具有 id order_index 的输入字段的值和过滤的两种方法。这三个部分是分开的，并且不相互依赖地工作。您需要稍微调整一下以适合您的情况。

在您的情况下，重要的是将日期放入 javascript Date 类中。不幸的是，javascript 中内置的解析并不可靠，因为它被认为是依赖于实现的，因此您必须使其适合您的特定情况。我建议在 google 中检查“javascript string to date”搜索掩码。这应该让你开始。一旦您以正确的格式（ Date ）获取日期，您就可以像任何其他变量一样比较它。

    var l_rows = [];

    f_table.find('tr').each(function(){

        var l_currRow  = $(this);

        l_rows.push(l_currRow);

    })

    //filtering 1, the result from the filtering is irrelevant

    //for scope of the question, but in the general case

    //it is what you are after

    //in here since you want to manage a table

    //you can go without the filtering of the array

    var l_filteredRows = l_rows.filter(function(f_row){

        var l_key = f_row.find('#order_index').val();

        var l_bResult = (/* condition here*/);

        if(l_bResult){

            f_row.show();

        }else{

            f_row.hide();

        }

        return l_bResult;

    });

    //filtering 2. no filter to the array, just iteration

    f_table.find('tr').each(function(){

        var l_key = $(this).find('#order_index ').val();

        var l_bResult = (/*condition here*/);

        if(l_bResult){

            f_row.show();

        }else{

            f_row.hide();

        }

        return l_bResult;

    });     

    //sorting

    l_rows.sort(function (a, b) {

        var keyA = parseInt($('td', a).find('#order_index').val());

        var keyB = parseInt($('td', b).find('#order_index').val());

        if(keyA > keyB) return 1;

        if(keyA < keyB) return -1;

        return 0; 

    });

    f_table.html('');

    for(var i=0;i<l_rows.length;i++){

        f_table.append(l_rows[i]);

    }