2016-07-14 16 views
0

データテーブルを作成し、検索アクションの前にデータの行インデックスを取得できます。検索後にデータテーブルが行インデックスを取得できない

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

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

欄にdataArrayにキーワードマッチでデータテーブルをフィルタリングするために、入力テキストsearchNameです。例えばsearchNameで入力:

はdatable iは最初の行をクリックすると、しかし、それはName1を示しName2Name23、 の名前でのみ2行が表示されます。正しい戻り値はName2

+0

を使用すると、行のインデックスを取得するAPIを使用しようとしたことがありますか? 'var rowindex = table.row(this).index()'? –

答えて

2

でなければなりません。検索を使用しているときは、DOMインデックスに頼ることはできません。一部のデータはフィルタリングのために表示されないためです。しかし、DataTableにはなど、dataindices正しいを取得するAPIメソッドを提供

$('#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); 
     } 
    }); 
}); 
+0

ありがとうございました!それは仕事です!改ページしても、それは実行可能です! –

関連する問題