Как добавить поиск в отдельные столбцы DataTable в нижнем колонтитуле?

Мне нужно добавить фильтрацию разных типов (текстовое поле, раскрывающийся список) для некоторых (!) Отдельных столбцов в DataTable в нижний колонтитул. То есть я хочу иметь возможность выполнять поиск по одному столбцу для каждого фильтра, который я добавляю в нижний колонтитул, и тип фильтра будет зависеть от столбца, скажем, для столбца 0 это текстовое поле, для столбца 1 это раскрывающийся список, для столбца 5 это указатель даты.

Вот тестовый пример. Обратите внимание на новый тип конструктора (DataTable, а не dataTable).

$("#my-table").DataTable({
  //.....
  , 'initComplete': function (settings, json) {
      var cl = this.api().columns(1); //2nd column

      $(cl.footer()).html("fdsfds"); //doesn't work

      //this.api().columns().every(function(){
        //var column = this;
        //$(column.footer()).html('fdsfsdfd');  //doesn't work either
      //});


      //neither this

      //var api = this.api();
      // $(api.column(1).footer()).html('dsfs2222');
  });

Что случилось?


javascript html jquery datatables jquery-events
person Mario    schedule 06.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Здесь вам нужно сделать две вещи.

  • Добавьте футут в свой стол, чтобы было место для его добавления
 <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="4" style="text-align:right">Total:</th>
                <th></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
        </tbody>
</table>

  • Используйте footerCallBack, как указано здесь http://datatables.net/examples/advanced_init/footer_callback.html Вы также использовали столбцы вместо столбца.

     $(document).ready(function() {
      $('#example').DataTable({
      "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api(), data;
          $(api.column(1).footer()).html("test text");
       }
      });
  });
person misha130    schedule 06.03.2016