DataTable - can't select rows on next page

brian4342

Hi all, I am making a ASP.NET MVC web app and I am having problems with a jQuery dataTable.

My dataTable is being populated with info from a ViewBag so I cannot post it to JS Fiddle or DataTables live and it is not live.

This is my dataTable that is being populated with info from a ViewBag (this bit works fine).
[code]




Invoice ID
Date
Reciept Date
Category
Total Value
Invoice Ref
Client
Status
Category URL
Description



@{
foreach (CustomInvoice invoice in ViewBag.Invoices)
{
var invoiceAmount = "£" + string.Format("{0:##,##0.00}", invoice.TotalValue);

@invoice.InvoiceId
@invoice.Date
@invoice.RecpDate
@invoice.Category
@invoiceAmount
@invoice.InvoiceRef
@invoice.Client
@invoice.Status
@invoice.CategoryUrl
@invoice.Description

}
}



[/code]

And this is the javascript I am using:
[code]

var oTable;

$(document).ready(function () {

// Hide last 2 columns
$("#invoiceTable").dataTable({
"aoColumns": [
null, null, null, null,
{ "sType": "currency" }, null, null, null,
{ "bVisible": false },
{ "bVisible": false } ]
});

// Sorts currency in dataTable
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"currency-pre": function (a) {
a = (a === "-") ? 0 : a.replace(/[^\d\-\.]/g, "");
return parseFloat(a);
},
"currency-asc": function (a, b) {
return a - b;
},
"currency-desc": function (a, b) {
return b - a;
}
});

// Add a click handler to the rows
$("#invoiceTable tbody tr").click(function () {
$(this).toggleClass('row_selected');
});

// Initialise the table
oTable = $('#invoiceTable').dataTable();
});

// Get the rows which are currently selected
function fnGetSelected(oTableLocal) {
return oTableLocal.$('tr.row_selected');
}

[/code]
Everything on the first page of the table works fine. I can select rows and do stuff. However when I go to the next page of rows I cannot select a row.

I have used firebug to debug the javascript and i have noticed that it does not step into this code when i click a row from a different page:
[code]
// Add a click handler to the rows
$("#invoiceTable tbody tr").click(function () {
$(this).toggleClass('row_selected');
});
[/code]
The FAQ home pages says:
Q. My events don't work on the second page (events in general)
A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, event's might not be applied. To over come this, is quite simple, as shown in these examples: pre-initialisation, post-initialisation. $().on() delegated events can also help.

I could not use this to fix my issue, Any Ideas?

tangerine

I can't say if this is the solution, but you are effectively initialising your DataTable twice; that is, where you have
[code]// Hide last 2 columns
$("#invoiceTable").dataTable({
"aoColumns": [ .... [/code]
and then again with an assignment to the variable oTable with the same table id.

brian4342

Amazing spot, that has solved my problem. Not sure why though lol
Thank you :)

allan

I'd also point out that you are adding the currency plug-in after you initialise your DataTable. You get away with it only because the currency sort isn't used on the first column.

Allan