Row Selection with Server Side Data
Row Selection with Server Side Data
I know I have to be doing something wrong here.
In my HTML template I have the following initialization code
[code]
$(document).ready(
function() {
$("#MerchantTable").dataTable(
{
"aaSorting": [[ 3, "asc" ]],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[6]=="Yes" ? nRow.className : "disabled_row";
return nRow;
},
"bProcessing": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "/merchants/tabledata/",
"bAutoWidth": false,
"aoColumns": [
{ "bSearchable": false, "bSortable": false },
{ "bSearchable": false, "bSortable": false },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true, "bVisible": false },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true }
]
}
);
}
);
[/code]
I am trying to implement the example where you can select rows found here: http://datatables.net/examples/api/select_row.html
I have added this code to my interface.js file which is separate from the code block above.
[code]
var merchantTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#MerchantTable tbody").click(function(event) {
$(merchantTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( merchantTable );
merchantTable.fnDeleteRow( anSelected[0] );
} );
/* Init the table */
merchantTable = $('#MerchantTable').dataTable();
} );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
In my HTML template I have the following initialization code
[code]
$(document).ready(
function() {
$("#MerchantTable").dataTable(
{
"aaSorting": [[ 3, "asc" ]],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[6]=="Yes" ? nRow.className : "disabled_row";
return nRow;
},
"bProcessing": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "/merchants/tabledata/",
"bAutoWidth": false,
"aoColumns": [
{ "bSearchable": false, "bSortable": false },
{ "bSearchable": false, "bSortable": false },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true, "bVisible": false },
{ "bSearchable": true, "bSortable": true },
{ "bSearchable": true, "bSortable": true }
]
}
);
}
);
[/code]
I am trying to implement the example where you can select rows found here: http://datatables.net/examples/api/select_row.html
I have added this code to my interface.js file which is separate from the code block above.
[code]
var merchantTable;
var giRedraw = false;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#MerchantTable tbody").click(function(event) {
$(merchantTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( merchantTable );
merchantTable.fnDeleteRow( anSelected[0] );
} );
/* Init the table */
merchantTable = $('#MerchantTable').dataTable();
} );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
This discussion has been closed.
Replies
http://datatables.net/examples/server_side/select_rows.html
It's Working!