同一页面中多个数据表循环内的日期范围

Question

我来自问题 [https://datatables.net/forums/discussion/51949/looping-multiple-datatables-on-the-same-page#latest]，发现了一个来自日期过滤的问题：如果我过滤并更改此日期范围，如果它在循环内，它会为第一个触发 table.draw()同一页面中的多个数据表

我的目的是让数据范围单独处理每个数据表

这是我已经完成的示例 http://live.datatables.net/magokusa/4/edit

HTML

<div class="container">
    <h3>Table 1</h3>
    <div class="input-group input-group-sm">
        <input type="date" id="dateFromupper" placeholder="Date from" value="2017-04-10">
        <div>
            <div>to</div>
        </div>
        <input type="date" id="dateToupper" placeholder="Date to" value="2018-09-10">
    </div>
    <table id="upper" data-action="https://demo.wp-api.org/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
            </tr>
        </thead>
    </table>

    <hr>
    <h3>Table 2</h3>
    <div class="input-group input-group-sm">
        <input type="date" id="dateFromlower" placeholder="Date from" value="2016-04-10">
        <div>
            <div>to</div>
        </div>
        <input type="date" id="dateTolower" placeholder="Date to" value="2018-09-12">
    </div>
    <table id="lower" data-action="https://css-tricks.com/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
            </tr>
        </thead>
    </table>
</div>

JS

$(document).ready( function () {
    $.each($('.datatable'), function () {
       var dt_id = $(this).attr('id');
       var dt_action = $(this).data('action');

      $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
          var min = $("#dateFrom" + dt_id).val();
          var max = $("#dateTo" + dt_id).val();

          if (min != null && max != null) {
            min = new Date(min);
            max = new Date(max);
            var startDate = new Date(data[1]);
            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;
            }
          } else {
            return true;
          }
        }
      );

      $("#dateFrom" + dt_id + ", #dateTo" + dt_id).change(function () {
        table.draw();
      });

       if (dt_action != null) {
           var dt_ajax = dt_action;
           var table = $('#' + dt_id).DataTable({
             ajax: {
               "url": dt_ajax, 
               "dataSrc": ""
             },
             columns: [
               { "data": "status" },
               { "data": "date" },
               { "data": "date_gmt" }, 
             ]
           });
        } else {
           var table = $('.datatable').DataTable({
               retrieve: true,
               responsive: true,
           });
       }
   });
});

Answer 1

由于您已经声明了两个不同的过滤器，您只需检查当前绘制过程是否与过滤器本身相关：

$.fn.dataTable.ext.search.push(
  function (settings, data, dataIndex) {
    if (settings.sInstance != dt_id) return true 
    ...
  }
)