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

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));

                                if (min == null && max == null) {
                                    return true;
                                }
                                if (min == null && startDate <= max) {
                                    return true;
                                }
                                if (max == null && startDate >= min) {
                                    return true;
                                }
                                if (startDate <= max && startDate >= min) {
                                    return true;
                                }
                                return false;
                            }
                        );
                        table.draw();
                        $.fn.dataTable.ext.search.pop();
                    });

                });

            </script>

这是表格，我希望它能用开始日期和结束日期过滤日期，但它什么也没做

                <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>




                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

我从这个 fiddle 中获取了这个示例，在线查找答案，因为我的表是在移动中渲染的，而且没有 sql 连接，所以所有在线示例都无法帮助我这样做:(

报告范围就在表格上方，它是一个按钮

            <div class="col-lg-3 col-md-3 form-group">
                <label>Buscar por fecha:</label>
                <div class="input-group">
                    <div id="reportrange" class="btn btn-info btn-lg">
                        <span class="input-group-append">
                        </span> <b class="caret"></b>
                    </div>
                </div>
            </div>

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>