|
How to reload a JQuery Datatables table data, using the API |
||||||||
Since I found the JQuery dataTables plugin, I use it quite a lot. I think it's a great way to display tabulated data, and it provides simple easy to use pagination and filtering options.
I've been building an interface to manage data, and arrived at the need to reload a datatable powered table, through a JavaScript request, rather than a page reload, or external variable (Url or form).
The problem with this is that if you try and re initialise a datatable into an existing datatable you get an error:
So you cannot re initialise an existing dataTable object. Looking through the API methods there is a relatively straight forward fix.
2
3 dTable = $('#example').dataTable( {
4 // data tables code
5 "bProcessing": true,
6 "bStateSave": true,
7 "bServerSide": true,
8etc...
9 aoData.push({ "name": "pageFilter", "value": filterText });
10 });
11else
12 {
13 dTable.fnDraw();
14 }
This code is basically checking if the object 'dTable' already exists, and if it is we are re drawing it, rather than using the existing object.
The fnDraw() method re-draws the table, so the data is refreshed. It uses the fnClearTable() method to first clear an existing data set, and the re draws it.
As an aside the 'filterText' value is a JavaScript value set elsewhere (a select field) that I am sending through to my server side request. It is used in a simple where clause in a query.
|
JQuery Datatables plugin example using a server side data request (coldfusion) |
||||||||
Im my previous article on how to use the JQuery datatables plug I concentrated mainly on the JQuery script, and how to build the AJAX request to receive a JSON response.
In this article I will demonstrate the full application which will include the front end JQuery, building the back end server response and a few tips that I've picked up since implementing the plugin. I am using an MS SQL table filled with UK location data that I also used for a weather webservice, to fill the table.
A full example of this working can be seen here: Data table server side example
|
What does "Invalid Label" mean in a JSON response, and how can I fix it? |
||||||||
I recently build an application that returned a JSON object of data based on a select field value. Whilst I was building this I encountered an error using the JavaScript eval() function on my JSON response. I am using the eval() function to parse a string from my JSON response, but firebug is showing a JavaScript error of "Invalid Label".
This is the code:
2 jsonResponse = eval(data);
3 var src = jsonResponse.DATA;
4 });
After having a Google around it appears that the eval function is interpreting the first item in the JSON response as a label, rather than data. By changing the code like this:
We are forcing eval to recognise the data as variable data. Now the JSON to string translation works.
|
Using other plug-ins with the JQuery Carousel Plug-in and event issues |
||||||||
This entry examines how the JQuery Carousel object interacts with other Plug-ins, and how to combine those plug-ins with the Carousel functionality. I also cover an issue where the jCarousel plug-in does not apply functionality to non visible elements when the page loads.
