jquery 数据表自定义过滤器在用户与表交互之前不会重绘表

Question

我有一个jquery数据表，它应用了一个自定义过滤器，可以根据月份和年份过滤行。

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

数据表由从数据库接收数据的 php foreach 循环填充。这实际上是 CodeIgnitor 项目的 View 。

这是我的自定义过滤器:

#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();
        });
    });

每当我选择月份或年份时，数据表都不会受到影响，直到我与表的某些其他默认功能(例如搜索或排序按钮)进行交互。

编辑:

过滤器是 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>

问题是我正在使用select。使用简单的输入字段就可以正常工作。

Answer 1

它对于输入元素来说工作得非常好。但如果您使用 select-elements，您应该监听 change-事件:

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