javascript - 对两个单独的 JS DataTable 中的两个不同的列索引进行排序

Question

我有一个网站，使用 DataTables 来格式化同一页面上的两个表格。目前，我可以显示和使用这两个表(见下文)，但我无法在单独的索引处单独订购这两个表。一个表有 8 列，另一个表有 11 列，我想按最后一列对每个表进行排序。有没有办法在初始化期间或之后对它们进行排序？

按第 8 列对两个表进行排序的示例:

$('table.display').DataTable({
    dom: 'f<br/>Btipr',
    order: [[ 7, "asc" ]],
    buttons: [{
            extend: 'excelHtml5',
            text: 'Save Table Excel',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'csv',
            text: 'Save Table Csv',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'pdf',
            text: 'Save Table PDF',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'colvis',
            text: 'Columns',
            className: "btn btn-outline-dark"
    }]
});

Answer 1

不使用类选择器，而是使用 Id 选择器分别为两个表编写代码，如下所示:

HTML:

<table class="display" id="table1Id"></table>
<table class="display" id="table2Id"></table>

JS:

$('table#table1Id').DataTable({
    dom: 'f<br/>Btipr',
    order: [[ 7, "asc" ]],
    buttons: [{
            extend: 'excelHtml5',
            text: 'Save Table Excel',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'csv',
            text: 'Save Table Csv',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'pdf',
            text: 'Save Table PDF',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'colvis',
            text: 'Columns',
            className: "btn btn-outline-dark"
    }]
});

$('table#table2Id').DataTable({
    dom: 'f<br/>Btipr',
    order: [[ 10, "asc" ]],
    buttons: [{
            extend: 'excelHtml5',
            text: 'Save Table Excel',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'csv',
            text: 'Save Table Csv',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'pdf',
            text: 'Save Table PDF',
            filename: input + "_Table",
            className: "btn btn-outline-dark"
        },{
            extend: 'colvis',
            text: 'Columns',
            className: "btn btn-outline-dark"
    }]
});