Question

因此，我试图像the documentation中那样使用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数据应位于对象 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();

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

1 个答案: