Set date with datepicker and reload table from server with selected date as a filter

gunter

Hi Allen,

I am using DataTables on my page. Now I have included a datepicker element to use it for selecting a date.
The selected date should be sent to the server where to use the date as a filter. The table should then be reloaded with the filtered json data.

Here is my code:

[code]
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy",
onSelect: function(dateText) {
$('#container').load('ServletToLoad?time_tracking=' + dateText);
}

});
});
[/code]

What I get is pure json on my page instead of just populating the table with the reloaded data. Can you see what is going wrong here?

Kind regards

Gunter

allan

From the jQuery `load` documentation: http://api.jquery.com/load/

> Description: Load data from the server and place the returned HTML into the matched element.

So I think it is working exactly as intended - it is dumping the response from the server into your `#container` element.

What I think you will want to do is to use the DataTables API to clear the current table and then add the data from your request to the server (you probably want to use `getJSON` rather than `load` btw). Something like:

[code]
$.getJSON( url, { 'date': dateText }, function ( json ) {
datatable.fnClearTable();
datatable.fnAddData( json );
} );
[/code]

where `datatable` is your DataTable reference. You might need to change the URL / data, but that's the general idea.

Allan

gunter

I have change the method as follows:

[code]
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy",
onSelect: function(dateText) {
$.getJSON( 'jsondata.json', { 'date': dateText }, function ( json ) {
$('#timesheet').dataTable().fnClearTable();
$('#timesheet').dataTable().fnAddData( json );
} );
}

});
});
[/code]

The date parameter is sent to the server, the json data are generated, but I get an error alert on retrieving the json data saying:
"DataTables warning (table id= 'timesheet'): Requested unknown parameter 'project_number' from the data source for row 0.

The table is not filled. The json data look so far okay. Any ideas what is going wrong?

Gunter

allan

Just sent you a PM on this, but to repeat here for completeness:

So the issue is just in how the data is being added. At the moment fnAddData is passing in the whole JSON object. But all it expects is the data for the rows. So simply doing:

[code]
$('#timesheet').dataTable().fnAddData( json.aaData );
[/code]

will fix it.

Regards,
Allan