单独的列搜索(文本输入)在我的rails代码中不起作用

时间:2019-01-10 11:12:45

标签: javascript jquery

单独的列搜索(文本输入)在我的rails代码中不起作用。
我的mappings.js文件:

            $(document).ready(function(){

              $("table[role='example_datatable']").each(function(){
                var dataTableInstance = $('#mappings').DataTable({
                    "order": [[ 4, "desc" ]],       
                  columnDefs: [  
                    { "searchable": false, "targets": 6}, 
                    { "orderable": false, "targets": 6}
                  ],
                  "bFilter": false,
                  dom: 'Bfrtip',
                  pageLength: 10,
                  processing: true,
                  serverSide: true,
                  ajax: $(this).data('url')
               });


              $('#mappings tfoot th').each(function(){
                        var title = $('#mappings thead th').eq($(this).index()).text();
                        $(this).html( '<input type="text" placeholder="Search '+title+'" name="'+title+'" />' );
                    });


              dataTableInstance.columns().every(function () {
              alert("hi");
              var datatableColumn = this;

              $(this.footer()).find('input').on('keyup', function () {
               alert("hi2");
               datatableColumn.search(this.value).draw();
              });
              });



              });
            })

我的mappings.html.erb文件:

            <%= content_tag :table, 
                            role: :example_datatable, 
                            id: 'mappings', 
                            class: 'table reconciletable table-striped table-bordered table-hover', 
                            data: { url: mappings_path(format: :json)} do %>

              <tfoot>
                <tr>
                  <th>Id</th>
                  <th>Entity</th>
                  <th>Item</th>
                  <th>Group</th>
                  <th>Record Created On</th>
                  <th>Record Created By</th>
                </tr>
              </tfoot>


              <thead>
                <tr>
                  <th>Id</th>
                  <th>Entity</th>
                  <th>Item</th>
                  <th>Group</th>
                  <th>Record Created On</th>
                  <th>Record Created By</th>
                  <th></th>
                </tr>
              </thead>

              <tbody>

              </tbody>


            <% end %>

我能够获取每一列的输入文本,但是一旦我尝试搜索并且什么也没有发生,并且它无法根据列搜索过滤我的数据表。 这是我的代码。请帮帮我:'(

1 个答案:

答案 0 :(得分:0)

尝试

//Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );

working Demo