Hightlight Selected row in server-side process table
Hightlight Selected row in server-side process table
bhushano7
Posts: 1Questions: 0Answers: 0
How to highlight selected row in the server side processing . I am using PHP. And I have try different answered that have already give but didnt find solution. I will show piece of code. Please suggest me for the fest solution...
[code]
oTable = $('#dataTableCar').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bJQueryUI": false,
"bAutoWidth": false,
"sScrollXInner": "130%",
"bScrollCollapse": false,
"oLanguage": {
"sSearch": "Filter: _INPUT_",
"sLengthMenu": "_MENU_ Trips",
"oPaginate": { "sFirst": "First", "sLast": "Last" }
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "carreportjson.php",
"aoColumns": [
{ "mData": "0", "sDefaultContent": "--" },
{ "mData": "1", "sDefaultContent": "--" },
{ "mData": "2", "sDefaultContent": "--" },
{ "mData": "3", "sDefaultContent": "--" },
{ "mData": "4", "sDefaultContent": "--" },
{ "mData": "5", "sDefaultContent": "--" },
{ "mData": "6", "sDefaultContent": "--" }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
/* Append the grade to the default row class name */
if (aData[2] != '') {
var date = new Date(aData[2]);
date = date.toDateString();
$('td:eq(2)', nRow).text(date);
}
if (aData[6] == "1") {
$('td:eq(6)', nRow).text("New");
}
else {
$('td:eq(6)', nRow).text("2nd Hand");
}
}
});
$('.dataTables_length select').uniform();
$("#dataTableCar tbody tr").click(function (e) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
}
});
[/code]
[code]
oTable = $('#dataTableCar').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bJQueryUI": false,
"bAutoWidth": false,
"sScrollXInner": "130%",
"bScrollCollapse": false,
"oLanguage": {
"sSearch": "Filter: _INPUT_",
"sLengthMenu": "_MENU_ Trips",
"oPaginate": { "sFirst": "First", "sLast": "Last" }
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "carreportjson.php",
"aoColumns": [
{ "mData": "0", "sDefaultContent": "--" },
{ "mData": "1", "sDefaultContent": "--" },
{ "mData": "2", "sDefaultContent": "--" },
{ "mData": "3", "sDefaultContent": "--" },
{ "mData": "4", "sDefaultContent": "--" },
{ "mData": "5", "sDefaultContent": "--" },
{ "mData": "6", "sDefaultContent": "--" }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
/* Append the grade to the default row class name */
if (aData[2] != '') {
var date = new Date(aData[2]);
date = date.toDateString();
$('td:eq(2)', nRow).text(date);
}
if (aData[6] == "1") {
$('td:eq(6)', nRow).text("New");
}
else {
$('td:eq(6)', nRow).text("2nd Hand");
}
}
});
$('.dataTables_length select').uniform();
$("#dataTableCar tbody tr").click(function (e) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
}
});
[/code]
This discussion has been closed.
Replies
> $("#dataTableCar tbody tr").click(function (e) {
With:
[code]
$("#dataTableCar").on( 'click', 'tbody tr', function (e) {
[/code]
See the jQuery documentation here: https://api.jquery.com/on/
Allan