Question

我有一个jquery数据表，该表已应用了一个自定义过滤器，该过滤器根据月和年对行进行过滤。

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

数据表由一个从数据库接收数据的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();
        });
    });

无论何时选择月份或年份，数据表都不会受到影响，直到与表的其他某些默认功能（例如搜索或排序按钮）进行交互为止。

编辑：

过滤器是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 s。使用简单的input字段就可以正常工作。

Answer 1

对于输入元素来说，它工作得很好。但是，如果您使用select个元素，则应该收听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>

jQuery datatable自定义过滤器在用户与表格进行交互之前不会重绘表格

1 个答案: