jQuery: DataTables query

jay.chandran

Hi.

I am using jQuery Datatable plugin for rendering a table as jQuery DataTable. I am not using any server side calls for fetching table row details.

I am generating the table HTML using jQuery from the information available on the page the user is currently viewing.

[code]





[/code]
When a user clicks on a link, using jQuery I build the required rows for the table and set it to the table body.

After that I initialize dataTable as show below:
[code]
$('#list_table').dataTable({
"bProcessing": false,
"bJQueryUI": true,
"bPaginate": true,
"bAutoWidth": false,
"bFilter" : true,
"bDestory" : true,
"oLanguage": { "sZeroRecords": "No data available", "sSearch" :"Filter" }
});`
[/code]

The above works fine when the user clicks on the link for the first time. But if the user clicks again, the I get error dataTable gives error:

` DataTables warning (table id = 'list_table'): Cannot reinitialise DataTable. ..... `

Even though the table is shown, it loses its Datatable CSS, search no longer works, next previous no longer works.

I have tried various options like setting `"bRetrieve" : true` also tried checking if the datatable object is available:
[code]
if (typeof dTable == 'undefined') {
dTable = $('#list_table').dataTable({
"bProcessing": false,
"bJQueryUI": true,
"bPaginate": true,
"bAutoWidth": false,
"bFilter" : true,
"bDestory" : true,
"oLanguage": { "sZeroRecords": "No data available", "sSearch" :"Filter" }
});
} else {
dTable.fnClearTable();
}
[/code]
But nothing seems to work. I have used DataTable with server side ajax call to reload data from the server where it works fine, but in this case I am not sure how to resolve this issue.

Thanks.
Jay

allan

> When a user clicks on a link, using jQuery I build the required rows for the table and set it to the table body.

Rather than inserting the row using jQuery DOM manipulation, you should use the fnAddData ( http://datatables.net/api#fnAddData ) API method. This allows DataTables to register your new row and built it into the sorting / filtering (etc) that is currently applied to your table. Example: http://datatables.net/examples/api/add_row.html

Allan

jay.chandran

Hi Alan,

thanks for your reply. It works perfect. When I was building the TABLE DOM using jQuery, I am adding unique id
[code]'' [/code] . I need it because I am using this unique id to then update an image for each row when a radio button (which is available for each row) is clicked by the user.

How can I add unique TD id using dataTable?

Thanks.
Jay

jay.chandran

Hi Alan,

I have figured it out. I was adding HREF for each row, I added unique id for it and I could do what I wanted to do.

Thanks for your help.

Cheers!
Jay

jay.chandran

Hi Alan,

Just one more question. I want to center align the data for some of the columns in the datatable. How can I achieve that? How can apply custom css for some of the columns?

Thanks.
Jay

allan

You can't apply custom CSS as such, but you can have DataTables add a class to column cells such that the CSS for that class is applied: http://datatables.net/usage/columns#sClass

Allan

jay.chandran

Thanks for it. It works like a charm. Thanks again... :)