同一页面中多个数据表的循环内的日期范围 [英] Date range inside loop of multiple datatable in the same page

问题描述

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

I came from the issue [https://datatables.net/forums/discussion/51949/looping-multiple-datatables-on-the-same-page#latest] and found an issue that comes from filtering of dates: if I filter and on change of this date range, it triggers table.draw() for the first one if it is inside of the loop of multiple datatable in the same page

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

My intention is to have the data range to work on each datatable individually

这里是我已经做过的一个例子
http://live.datatables.net/magokusa/4/edit

Here is a sample of what I already done 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,
           });
       }
   });
});

推荐答案

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

Since you already are declaring two different filters, you can just check if the current draw process is related to the filter itself :

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

这篇关于同一页面中多个数据表的循环内的日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！