JQuery Datatable с несколькими вкладками - PullRequest
0 голосов
/ 04 февраля 2019

Поэтому я пытаюсь реализовать несколько вкладок с Datatable, как в документации .

Со стороны сервера у меня есть данные, подобные следующим.

Массивколичество сессий, например: session1 session2.

Для каждого сеанса он будет иметь столбцы, такие как name, age.На данный момент Datatable работает, если я просто пропускаю одну сессию.

Как реализовать таблицу данных с несколькими вкладками при передаче массива сессий в мой файл pug?

Я использую Datatable JQueryс мопсом, и число сессий может отличаться.

Вот код, который у меня есть для файла мопса в голове и теле.

head
    title !{comp}
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
body
    table#comp.table.table-hover.table-striped.table-bordered

    script(src='https://code.jquery.com/jquery.js')
    script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js')
    script.
        $(document).ready(function() {
            var table = $('#comp').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: `/api/competition/#{id}`,
                    dataSrc: "session1"
                },    
                columns: [ 
                    { "title": "Name", "data" : "Name" },
                    { "title": "Age", "data" : "Age" }
                ]
            });
        });

1 Ответ

0 голосов
/ 04 февраля 2019

Вам нужно будет вызывать ваши таблицы через класс (или любой другой НО идентификатор), потому что у вас будет несколько таблиц (вкладок).В этом примере ваши ajax-данные должны находиться в объекте data (независимо от количества сеансов) и просто включать в данные поле для sessionID (сделать его последним полем).

var table = $('.datatables').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: `/api/competition/#{id}`,
                    dataSrc: "data"
                },    
                columns: [ 
                    { "title": "Name", "data" : "Name" },
                    { "title": "Age", "data" : "Age" }
                ]
            });

Затем каждая вкладка фактически выполняет поиск в данных:

$('#myTable1').DataTable().search( 'session1' ).draw();
$('#myTable2').DataTable().search( 'session2' ).draw();
...