如何在datatable 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)將從t保存的表中選擇“ this”表。

$(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();
});

Answer 2

嘗試這個，

使用.eq（）方法以通過其索引訪問jQuery對象。 eq索引從0開始。

var numTables = $(table).length
$(document).ready(function() { 
    for(var i =0; i < numTables; i++){     
    var t = $('table.dataTable').eq(i).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();
}

});