Question

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

Mono<Foo> myFoo =
        CacheMono.lookup(key -> Mono.justOrEmpty(myCache.getIfPresent(key))
                .map(Signal::next), id)
                .onCacheMissResume(() -> myService.fetch(id))
                .andWriteWith((key, signal) -> Mono.fromRunnable(() ->
                        Optional.ofNullable(signal.get())
                                .ifPresent(value -> myCache.put(key, value))));

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

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

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

Answer 1

您可以使用$.fn.DataTable.tables({visible:true,api:true})来获取页面上的所有数据表，而不是简单地使用$.each()，Array.prototype.forEach()或您喜欢的任何方法对其进行迭代，然后附加必要的搜索输入

Answer 2

获得所需的功能。

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

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

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

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

只需更改这些行即可反映出您希望在<thead>中进行此操作。

$(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

如何在页面的多个表的顶部的DataTables中放置单个搜索列输入

2 个答案: