Как применить фильтр поиска только для одного столбца, используя таблицы данных - PullRequest
Новая
       2

Как применить фильтр поиска только для одного столбца, используя таблицы данных

0 голосов
/ 06 января 2019

У меня есть таблица, и я хотел бы применить фильтр поиска к определенному столбцу. Я вижу несколько ссылок о том, как это сделать, но в моем коде, когда я вставляю блок javascript для выполнения фильтра, ничего не отображается. 

 <html>
 <head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">


  </head>
 <body>
 <table id="example">
   <thead>
   <tr><th>Sites</th></tr>
  </thead>
  <tbody>
     <tr><td>SitePoint</td></tr>
     <tr><td>Learnable</td></tr>
     <tr><td>Flippa</td></tr>
   </tbody>
  </table>
  <script>
  $(function(){
 $("#example").dataTable();
 })
  </script>

моя путаница в том, куда уходит этот блок кода (вписывается в основной код)? 

  <script>
  $(document).ready(function() {
  // Setup - add a text input to each footer cell
  $('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" 
     />' );
      } );

   // DataTable
   var table = $('#example').DataTable();

    // Apply the search
   table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );
} );
</script>

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Если вы хотите применить фильтр поиска, используя вводимые данные поиска, вы можете добиться этого, установив для параметра поиска значение false для остальных столбцов, например: 

$('#example').datatable({
    columnDefs: {
       targets: [1,2], // the desired columns
       searchable: false
    }
});
0 голосов
/ 06 января 2019

Из их источника: 

$('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    var table = $('#example').DataTable( {
        orderCellsTop: true,
        fixedHeader: true
    } );

Этот фрагмент кода выполняется после визуализации DOM.

Идентификатор клонирования, используемый для предотвращения прокручивания имен столбцов таблицы со страницы. Для этого вам понадобится этот скрипт .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...