DataTable - can't select rows on next page

DataTable - can't select rows on next page

brian4342brian4342 Posts: 2Questions: 0Answers: 0
edited February 2014 in DataTables 1.10
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?

Replies

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited February 2014
    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.
  • brian4342brian4342 Posts: 2Questions: 0Answers: 0
    Amazing spot, that has solved my problem. Not sure why though lol
    Thank you :)
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
This discussion has been closed.