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

Question

У меня есть несколько таблиц на моей странице с class = "example".Я применил поиск по отдельным столбцам в моих таблицах, используя следующий код:

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

По умолчанию ввод отдельных столбцов поиска добавляется в конец таблиц.Теперь строка с комментарием (// Проблема) - это то, что я использую для добавления отдельных входных данных столбца поиска вверху каждой таблицы.Но это добавляет отдельные входные данные столбца поиска первой таблицы ко всем остальным таблицам.Я думаю, что это можно решить, поместив строку (// Проблема) внутри этого цикла:

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

Но я не могу понять, как мне использовать ее внутри.Я пробовал много вещей, но это не сработало для меня.

Answer 1

Для получения требуемой функциональности.

Вам необходимо изменить код 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

Answer 2

Вы можете захватить все таблицы данных на странице, используя $.fn.DataTable.tables({visible:true,api:true}), чем вы можете просто перебрать их, используя $.each(), Array.prototype.forEach() или любой другой метод, который вы предпочитаете, и добавить необходимый поисковый запрос.