DataTable - несколько таблиц на одной странице, но только один отвечает

У меня есть три DataTables на моей странице:DataTable - несколько таблиц на одной странице, но только один отвечает

<table class="driving-table"> 
    -- table #1-- 
</table> 
<table class="driving-table"> 
    -- table #2-- 
</table> 
<table class="driving-table"> 
    -- table #3-- 
</table>

Это JS, который я использую, чтобы инициализировать мои таблицы:

var table = $('table.driving-table').DataTable({ 
    rowReorder: true, 
    dom: 'Bfrtip', 
    "bFilter": true, 
    buttons: [ 
     'copyHtml5', 'excelHtml5', 'pdfHtml5', 'print' 
    ], 
    "paging": false, //Hide the "Show entries" and "Paging" 
    "bInfo": false     
}); 

//Searching: 
$('#top_search').on('keyup', function() { 
     table.search(this.value).draw(); 
});

Однако, используя выше, я могу только получить вход search для работы на таблице №3. то же относится к buttons

Here is a jsFiddle, что указывает на проблему.

Как вы можете видеть, только нижний стол доступен для поиска, а только кнопки нижних столов размещаются в .button-holder.

Что я делаю неправильно?

источник

2016-12-22 oliverbj

Прежде всего, не используйте один и тот же 'id' для более чем одного элемента' DOM' – philantrovert

А, хорошо. Не знаю, почему у меня id = управляющий стол в таблицах, так как я его не использую. Я удалю его. – oliverbj

Кроме того, я не думаю, что вы должны инициализировать 3 разных типа данных, подобных этому. Я бы сделал идентификаторы 'drivingtable1, drivingtable2, drivingtable3', а затем инициализировал все 3 из них отдельно тремя разными объектами' table1, 2 и 3'. Но это только я. Может быть, есть более простой способ. – philantrovert

Вы можете использовать tables() метод API, как показано ниже:

$('#top_search').on('keyup', function() { 
    table.tables().search(this.value).draw(); 
}); 

table.tables().buttons().container() 
    .appendTo('.button-holder');

См updated jsFiddle для кода и демонстрации.

источник

2016-12-22 15:44:03

DataTable - несколько таблиц на одной странице, но только один отвечает

ответ

Смежные вопросы