Question

我已经创建了一个数据表，可以在任何搜索操作之前获取数据的行索引。

dataArray=[
   [1, "Name1"],       
   [2, "Name2"], , 
   [3, "Name23"], 
];


var table = $('#tblName').DataTable( {
             scrollY:        '40vh',
             "scrollX": true,
             scrollCollapse: true,
             paging:         false,
             responsive:true,
             data: dataArray,
           } );
$('#tblName tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected1') ) {
    }
    else 
    {
       $('#tblName tbody tr ').each(  function () {
          if ( $(this).hasClass('selected1') ) {
             $(this).removeClass('selected1');
           }
       } );
       $(this).addClass('selected1');
    }
} );

我想获取行索引来更改dataArray的值。以下是输入文本searchName，用于过滤第1列中与dataArray匹配的关键字的数据表

$('#searchName').on( 'keyup', function () {
   table
   .columns( 1 )
   .search( this.value )
   .draw();
} );

$('#tblName tbody').on( 'click', 'tr', function () {
   $('#tblName tbody tr ').each(  function () {
       if ( $(this).hasClass('selected1') ) {
           var rowindex=$(this).closest('tr').index();
           var dataWareHouse = table.row( this ).columns(1).data();
           var selectedName = dataArray[0][rowindex];
           console.log(selectedName);
       }
    } );
} );

使用输入文本searchName过滤数据表后，我无法获得正确的旧行索引。例如searchName中的输入：

2

数据表只会显示名为Name2和Name23的2行，但是，当我单击第一行时，它会显示Name1。正确的返回数据应为Name2

Answer 1

嗯，使用搜索时不能依赖DOM索引。由于过滤不会显示某些数据。但DataTable提供了API方法来获取正确的indices，data等

$('#tblName tbody').on( 'click', 'tr', function () {
   $('#tblName tbody tr ').each(  function () {
       if ( $(this).hasClass('selected1') ) {
           var rowindex = table.row(this).index();
           var rowData = table.row(this).data();
           var selectedName = table.row(this)[0];
           var anotherWayToGetName = table.cell(rowIndex, 0).data();
           console.log(rowIndex, rowData, selectedName, anotherWayToGeName);
       }
    } );
} );

数据表在搜索后无法获取行索引

1 个答案: