Set date with datepicker and reload table from server with selected date as a filter
Set date with datepicker and reload table from server with selected date as a filter
gunter
Posts: 11Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
> 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
[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
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