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

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