Настраиваемые пользовательские фильтры jquery не перерисовывают таблицу, пока пользователь не взаимодействует с таблицей - PullRequest
Новая
       10

Настраиваемые пользовательские фильтры jquery не перерисовывают таблицу, пока пользователь не взаимодействует с таблицей

2 голосов
/ 05 июня 2019

У меня есть jatery datatable, к которому применен пользовательский фильтр, который фильтрует строки на основе месяца и года.

Примененный пользовательский фильтр не перерисовывает таблицу, пока я не взаимодействую с таблицей послеприменение фильтра, например, путем ввода в строке поиска или сортировки строк из кнопок сортировки по умолчанию в заголовках столбцов.

datatable заполняется циклом php foreach, который получает данные из базы данных.На самом деле это вид проекта CodeIgnitor.

Это мой пользовательский фильтр:

#month и #year - это идентификаторы двух html select входов. 

    $.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 полями он работает нормально.

1 Ответ

1 голос
/ 06 июня 2019

Отлично работает для input-элементов.Но если вы используете select -элементы, вы должны слушать 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>
...