如何在页面的多个表的顶部的DataTables中放置单个搜索列输入 [英] How to place individual search column inputs in DataTables at the head for multiple tables in a page

问题描述

我的页面中有多个带有class ="example"的表.我已使用以下代码在表上应用了单独的列搜索:

I have multiple tables in my page with class="example" . I have applied individual column searching on my tables using the following code :

$(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
    $('.example').each(function(){
       var table = $(this).DataTable();

       table.columns().every( function () {
           var that = this;
           $( 'input', this.footer() ).on( 'keyup change', function () {
               if ( that.search() !== this.value ) {
                    that.search( this.value ).draw();
            }
        });
      });
    });
  $('.example tfoot th').appendTo('.example thead'); //Problem
} );

默认情况下，单个搜索列输入被添加到表格的底部. 现在，带有注释(//问题)的行是我用来在每个表格顶部添加单个搜索列输入的行.但这会将第一个表的单个搜索列输入添加到所有其他表中.我认为可以通过将行(//Problem)放在此循环中来解决此问题:

By default, the individual search column inputs are added to the bottom of the tables. Now, The line with the comment (//Problem) is what I am using to add the individual search column inputs at the top of each table. But this adds the individual search column inputs of the first table to all the other tables. I think this can be solved by placing the line (//Problem) inside this loop :

$('.example').each(function()

但是我无法弄清楚如何在内部使用它.我尝试了很多事情，但这对我没有用.

But I am not able to figure this out how do I use it inside. I tried many things but that didn't work for me.

推荐答案

获取所需的功能.

您需要更改jQuery代码，以便在表的标题而不是页脚中创建搜索框.

You need to change the jQuery code so that the search boxes are created in the header of the table instead of the footer.

在当前代码中，有两行用于指定要在<tfoot> HTML标记上完成的工作.

With the current code, there are two lines the specify the work is to be done on the <tfoot> HTML tag.

第3行:$('.example tfoot th').each( function () {

第13行:$( 'input', this.footer() ).on( 'keyup change', function () {

只需更改这些行以反映您希望在<thead>中进行此操作.

Simply change these line to reflect that you would like this to take place in the <thead> instead.

$(document).ready(function() {
    // Setup - add a text input to each HEADER cell
    $('.example thead 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.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );
} );

Codepen示例: https://codepen.io/selabie68/pen/gErWbL

Codepen example: https://codepen.io/selabie68/pen/gErWbL

这篇关于如何在页面的多个表的顶部的DataTables中放置单个搜索列输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！