javascript - 如何在数据表js中通过一条语句对多个表使用索引列？

Question

我在单个页面中使用 datatable js 来处理 2 个表。

HTML

<!-- Table#1 -->
<table class="dataTable">
<thead>
    <tr>
        <td>#</td>
        <td>col1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>val1</td>
    </tr>
    <tr>
        <td></td>
        <td>val2</td>
    </tr>
    <tr>
        <td></td>
        <td>val3</td>
    </tr>
</tbody>
</table>

<!-- Table#2 -->
<table class="dataTable">
<thead>
    <tr>
        <td>#</td>
        <td>col1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>val1</td>
    </tr>
    <tr>
        <td></td>
        <td>val2</td>
    </tr>
    <tr>
        <td></td>
        <td>val3</td>
    </tr>
</tbody>
</table>

Javascript

$(document).ready(function() {      
    var t = $('table.dataTable').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );

    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();

});

它仅在第一个表中显示索引列。我怎样才能显示它？

我知道可以通过在表上使用两个不同的 id 来实现。但是，在这种情况下我必须再次复制 JavaScript 代码。如果我想使用另一个表需要再次复制它。

有没有办法通过一次 JavaScript 代码将其用于所有表格？

Answer 1

大概您希望两个表彼此独立编号。

如果是这样，那么事件处理程序中的 this 应该引用与事件相关的表，并且 t.table(this) 将从中选择“this”表t 中保存的表。

$(document).ready(function() { 
    var t = $('table.dataTable').DataTable({
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": 0
        }],
        "order": [[1, 'asc']]
    });

    t.on('order.dt search.dt', function () {
        t.table(this).column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) {
            cell.innerHTML = i+1;
        });
    }).draw();
});