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

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

数据表将仅显示 2 行，名称为 Name2 和 Name23，但是，当我单击第一行时，它会显示 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);
       }
    } );
} );