DataTables row select does not work after first page
DataTables row select does not work after first page
radi8
Posts: 31Questions: 6Answers: 0
I am using an adaptation of the "DataTables row select example". This seems to work for me on the first page only. If I need to select a row in a subsequent page, the $('#quote_hist tbody tr').click(function(e){.....}); does not trigger.
There is one difference in my code to that of the example: I am building and initializing the datatables API (through the build_table function call) before binding the 'click' event to the table.
Interestingly enough, if I have a multi-page solution and do a search for a record in a subsequent page, the row is again unresponsive to the click event.
Do I need to bind the click event on the table first and then apply the datatables api?
Here is my adaptation of the code:
[code]
// get the dataset
$.getJSON(quote.url + '?funct=7', function(data){
if(data[0]>0){
// build the table from the dataset and initialize the datatables API, show the resulting table
build_table(data,'quote_history','Quote History: Click Row to view Quote Details','quote_hist',3);
// bind the click event
$('#quote_hist tbody tr').click( function( e ){
if ( $(this).hasClass('row_selected') ) {
$('#quote_hist tr').removeClass('row_selected');
$(this).addClass('row_selected');
var a = $(this).closest('tr').find('td:first').text();
$.get(quote.url + '?funct=10&term='+a, function(data2){
quote.id = a;
quote.get_html();
});
}
else{
$.get(quote.url + '?funct=10&term=0', function(data2){
quote.set_indicators();
});
}
});
}
});
[/code]
There is one difference in my code to that of the example: I am building and initializing the datatables API (through the build_table function call) before binding the 'click' event to the table.
Interestingly enough, if I have a multi-page solution and do a search for a record in a subsequent page, the row is again unresponsive to the click event.
Do I need to bind the click event on the table first and then apply the datatables api?
Here is my adaptation of the code:
[code]
// get the dataset
$.getJSON(quote.url + '?funct=7', function(data){
if(data[0]>0){
// build the table from the dataset and initialize the datatables API, show the resulting table
build_table(data,'quote_history','Quote History: Click Row to view Quote Details','quote_hist',3);
// bind the click event
$('#quote_hist tbody tr').click( function( e ){
if ( $(this).hasClass('row_selected') ) {
$('#quote_hist tr').removeClass('row_selected');
$(this).addClass('row_selected');
var a = $(this).closest('tr').find('td:first').text();
$.get(quote.url + '?funct=10&term='+a, function(data2){
quote.id = a;
quote.get_html();
});
}
else{
$.get(quote.url + '?funct=10&term=0', function(data2){
quote.set_indicators();
});
}
});
}
});
[/code]
This discussion has been closed.
Replies