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

Question

单个列搜索（文本输入）在我的 rails 代码中不起作用。
我的映射.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();
              });
              });

              });
            })

我的映射.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 %>

我

能够获取每列的输入文本，但是一旦我尝试搜索，没有任何反应，它无法根据列搜索过滤我的数据表。这是我的代码。请帮助我：'（

Answer 1

试试这个

//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();
        } );
    } );

工作演示