Question

我在一个页面中使用数据表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)将选择＆＃34;这个＆＃34;来自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();
});

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

});

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

2 个答案: