如何在datatable js中使用单个语句的多个表的索引列？

I'm using datatable js for 2 tables in a single page.

我在一个页面中使用2个表的datatable js。

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

使用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();

});

It's showing the index column only in first table. How can I display it?

它仅在第一个表中显示索引列。我该如何显示它？

I know it's possible by using two different id on the tables. But, in that case I've to copy the javascript code again. If I want to use another table need to copy it once more.

我知道可以在表格上使用两个不同的id。但是，在这种情况下，我将再次复制javascript代码。如果我想使用另一个表需要再次复制它。

Is there any way to use it for all tables by using the javascript code once?

有没有办法使用javascript代码一次将它用于所有表？

2 个解决方案

#1

Presumably you want the two tables to be numbered independently of each other.

据推测，您希望两个表彼此独立编号。

If so, then this in the event handler should refer to whichever table the event relates to, and t.table(this) will select "this" table from the tables held in t.

如果是这样，那么事件处理程序中的这个应该引用事件所涉及的任何表，并且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();
});

#2

Try this,

尝试这个，

Use the .eq() method in order to access a jQuery object by its index. And eq indices start from 0.

使用.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();
}

});

#1