$ .fn.dataTable.ext.search.push не вызывается

Question

Я пытаюсь использовать плагин поиска по таблице данных для фильтрации моей HTML-таблицы. Я столкнулся со следующей проблемой.

У меня есть следующая программа, Но когда я проверяю, работает ли функция jquery $ .fn.dataTable.ext.search.push или нет, это не так.

<div class="page-wrapper">
<nav aria-label="breadcrumb">

   <div class="breadcrumb">


        <div class="pull-right-button">
            <button type="button" onclick="exportTableToExcel('example')" class="btn btn-success"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Download Report</button>
            <button type="button" onclick="showFilters()" class="btn btn-success"> Filters</button>
        </div>
     </div>
</nav>
  <div class="container-fluid" >
     <div class="col-sm-12">
        <div class="card">

          <table border="0"  cellpadding="5">
        <tbody><tr>
            <td>Minimum age:</td>
            <td><input type="text" id="min" name="min"></td>
            <td>Maximum age:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody></table>

          <div class="table-responsive" >

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <div>

          <table id="example" class="display" style="width:100%">
        <thead>

          //some data

        </thead>
        <tbody>

            //some data

        </tbody>
    </table>


        </div>
    <div class="pagination">
  <?= $this->pagination->create_links();?>
</div>


         </div>
    </div>
</div> 
<script type="text/javascript">
    function exportTableToExcel(tableID, filename = ''){
        \\export function
    }
</script>
<script >

      $('#example').dataTable({
        searching: false,
    "paging": false, info: false
});


      /* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      // var Row = document.getElementById("data_row");
      // var Cells = Row.getElementsByTagName("td");
      //   var age = Cells[0].innerText;
      //   console.log(age);
      //   var min = document.getElementById("min").value;
      //   var max = document.getElementById("max").value;// use data for the age column

      var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0;

        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

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

    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );


    </script>

Я сослался и позаимствовал исходный код из следующих источников https://datatables.net/examples/plug-ins/range_filtering.html также ссылаются на следующие источники стекового потока, фильтрация jQuery DataTable - так запутанно

Но я не могу найти удовлетворительное решение. Было бы здорово, если бы кто-то мог сказать мне, что я делаю не так?

Спасибо за ваши предложения

Answer 1

Пара проблем с вашим кодом.

1. Вы инициализируете DataTables несколько раз, старый способ .dataTable() и новый way .DataTable() Вы должны использовать новый способ (1.10 +)
2. Столбец, который фильтруется в этой функции $.fn.dataTable.ext.search.push, следует за индексом, основанным на 0, поэтому, если это четвертый столбец, если вы считаете от 1, вам нужно использовать данные [3]. Измените свой код соответственно.

Вот рабочая скрипка .