Date range inside loop of multiple datatable in th

2019-07-23 18:32发布

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

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

标签: datatables
1条回答
Deceive 欺骗
2楼-- · 2019-07-23 18:59

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 
    ...
  }
)
查看更多
登录 后发表回答