Combining jQuery .load() with DataTables
Combining jQuery .load() with DataTables
I have an external file (colors.html) that contains lines of data that look like this:
[code]
Forten Aramid Composite 1840Natural660Natural
Forten Aramid Gear 16L40Natural660Natural
[/code]
In my calling HTML document, I have given the tag the ID of "color-data", so that I can populate the table body using this code:
[code]
$(document).ready(function () {
$('#color-data').load('colors.html');
});
[/code]
However, Datatables doesn't pick up the fact that I've populated the table, so there is no formatting, sorting, filtering, etc. (When I hard-code the data into the calling file, everything works perfectly.)
I've tried using the jQuery .load() callback feature, and the DataTables fnInitComplete feature, but I must be doing something incorrectly because even when the data loads from the external file, DataTables doesn't recognize and process it. It also works great when the external file is in JSON format, and I call it using sAjaxSource, but unfortunately the external file is in HTML and not JSON format.
Is it possible to make this combination work?
[code]
Forten Aramid Composite 1840Natural660Natural
Forten Aramid Gear 16L40Natural660Natural
[/code]
In my calling HTML document, I have given the tag the ID of "color-data", so that I can populate the table body using this code:
[code]
$(document).ready(function () {
$('#color-data').load('colors.html');
});
[/code]
However, Datatables doesn't pick up the fact that I've populated the table, so there is no formatting, sorting, filtering, etc. (When I hard-code the data into the calling file, everything works perfectly.)
I've tried using the jQuery .load() callback feature, and the DataTables fnInitComplete feature, but I must be doing something incorrectly because even when the data loads from the external file, DataTables doesn't recognize and process it. It also works great when the external file is in JSON format, and I call it using sAjaxSource, but unfortunately the external file is in HTML and not JSON format.
Is it possible to make this combination work?
This discussion has been closed.
Replies
Thanks very much for the PM with the links!
Absolutely this is possible. The problem with it as it is, is that you are manipulating the DOM underneath DataTables, and there is no way for DataTables to know that you have done so, without using the API (there is no cross browser DOM mutation event unfortunately).
So there are two ways to do this - use the DataTables API, or simply load the table before initialising it.
1. The way I would recommend this be done at the moment is to simply initialise the table after the data has been loaded:
[code]
$(document).ready(function () {
$('#color-data').load('colors.html', function () {
$('#colors').dataTable( ... );
} );
});
[/code]
2. The other option is to write the TR elements that come back from the server into a temporary table and then use the DataTables API to tell it that it should load data (the fnAddTr plug-in for DataTables 1.9- and in DataTables 1.10 this ability is built in - although 1.10 is in development and not ready for production yet...).
As I say, I'd recommend option 1 at the moment.
Regards,
Allan
I just sent two messages, but I'm not seeing them, so I'm reposting.
I tried this method, and get a table with no formatting, sorting, or filtering.
http://usrsa.atspace.tv/string-colors2.html
Also, my browser error console is telling me:
jquery.dataTables.min.js:29 TypeError: 'undefined' is not an object (evaluating 'a.aoColumns[c].fnSetData')
The problem you are seeing is because the THEAD has only 7 columns in it, but the TBODY when loaded has 8. DataTables is getting a bit upset about the discrepancy. I think you just need an extra header cell.
Regards,
Allan