I have successfully created a datatable and can retrieve the row index of the data before any search action is performed.
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');
}
} );
I aim to retrieve the row index in order to change the value of the dataArray. Input text searchName is provided to filter the datatable based on keyword matches with dataArray in column 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);
}
} );
} );
After filtering the datatable with the input text searchName, I encounter an issue where I am unable to retrieve the correct old row index. For instance, upon entering '2' in searchName:
2
The datatable displays only 2 rows with the names Name2 and Name23. However, when clicking on the first row, it displays Name1 instead of Name2 which is the expected result.