带有多个选项卡的jQuery数据表

Question

因此，我试图像文档中那样使用Datatable实现多个选项卡。

从服务器端，我有如下数据。

会话数数组，例如：session1 session2。

对于每个会话，它将具有诸如名称，年龄之类的列。 现在，如果我仅通过一个会话，则数据表将起作用。

将会话数组传递到我的pug文件时，如何实现多表数据表？

我将JQuery Datatable与pug一起使用，会话数可能会有所不同。

这是我现在头和身上的哈巴狗文件的代码。

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" }
                ]
            });
        });

Answer 1

您将需要通过一个类（或任何BUT ID）来调用表，因为您将拥有多个表（标签）。 在此示例中，您的ajax数据应位于对象数据中 （无论多少会话），并且仅在数据中包括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();