jquery 数据table 自定义过滤器不会重绘 table 直到用户与 table 交互

Question

我有 jquery 数据table，其中应用了自定义过滤器，根据月份和年份过滤行。

我应用的自定义过滤器不会重绘 table，直到我在应用过滤器后与 table 交互，例如通过在搜索栏中键入或从中的默认排序按钮对行进行排序在列标题中。

datatable 由从数据库接收数据的 php foreach 循环填充。这实际上是一个 CodeIgnitor 项目的视图。

这是我的自定义过滤器：

#month 和 #year 是两个 html select 输入的 ID。

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var month = parseInt($('#month').val(), 10);
            var year = parseInt($('#year').val(), 10);
            var date = data[0].split('-');

            if (parseInt(date[1], 10) == month && parseInt(date[0], 10) == year)
            {
                return true;
            }
            return false;
        }
    );

    $(document).ready(function() {
        var table = $('#expenseList').DataTable();

        $('#month, #year').keyup( function() {
            table.draw();
        });
    });

每当我 select 一个月或一年，数据 table 保持不受影响，直到我与 table 的一些其他默认功能交互，例如搜索或排序按钮。

编辑：

过滤器是 html select 菜单，如下所示：

<table cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td>Company:</td>
            <td>
                <select id="company" name="company">
                    <option value="" selected> Select </option>
                    <?php foreach($data['company'] as $c) { ?>
                        <option value="<?php echo $c->id; ?>"> <?php echo $c->company_name; ?> </option>
                    <?php } ?>
                </select>
            </td>
        </tr>
        <tr>
            <td>Select Month/Year:</td>
            <td>
                <select id="month" name="month">
                    <?php 
                        $month = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
                        for($i = 0; $i < 12; $i++) { 
                            if(date('m') == $i+1) { ?>
                                <option value=<?php echo $i+1; ?> selected> <?php echo $month[$i]; ?> </option>
                            <?php } else { ?>
                                <option value=<?php echo $i+1; ?>> <?php echo $month[$i]; ?> </option>
                    <?php } } ?>
                </select>
            </td>
            <td>
                <select id="year" name="year">
                    <?php
                        for($i = 2000; $i < 2100; $i++) { 
                            if(date("Y") == $i) { ?>
                                <option value=<?php echo $i; ?> selected> <?php echo $i; ?> </option>
                            <?php } else { ?>
                                <option value=<?php echo $i; ?>> <?php echo $i; ?> </option>
                        <?php } } ?>
                </select>
            </td>
        </tr>
    </tbody>
</table>

问题是我使用的是 selects。使用简单的 input 字段，它工作正常。

Answer 1

它在 input-elements 上工作得很好。但是如果你使用 select-elements 你应该监听 change-event:

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    let month = parseInt($('#month').val(), 10);
    let year = parseInt($('#year').val(), 10);
    let date = data[0].split('-');
    
    if (parseInt(date[1], 10) == month && parseInt(date[0], 10) == year) {
      return true;
    }
    return false;
  }
);

$(document).ready(function() {
  let table = $('#expenseList').DataTable();
  $('#month, #year').on('change', function(event) {
    table.draw();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

Month:
<select id="month" name="month">
  <option value="1" selected="selected">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<br>
Year: 
<select id="year" name="year">
  <option value="2018">2018</option>
  <option value="2019" selected="selected">2019</option>
</select>
<br>

<table id="expenseList">
  <thead>
    <tr><th>Date</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>2018-12-31</td><td>Test 1234</td></tr>
    <tr><td>2019-01-01</td><td>I dont know!</td></tr>
    <tr><td>2019-01-02</td><td>Another...</td></tr>
    <tr><td>2019-02-01</td><td>Apple</td></tr>
    <tr><td>2019-03-01</td><td>Banana</td></tr>
    <tr><td>2019-04-01</td><td>Coconut</td></tr>
    <tr><td>2019-05-01</td><td>Donut</td></tr>
    <tr><td>2019-06-05</td><td>Lorem Ipsum</td></tr>
  </tbody>
</table>

jquery 数据table 自定义过滤器不会重绘 table 直到用户与 table 交互

jquery datatable custom filters do not redraw the table until user interacts with the table

jquery

datatables

datatables-1.10