Date Picker Integration

jcrawford

Hello Allan,

I am wondering if it is possible to do something like this as I have not seen it on your examples page. What I need to do is have the data table show as normal BUT I also want to have text fields on my page that will integrate with the data tables query. Basically we need a way to choose a start and end date.

I plan to use some JS calendar for the date picker fields but I am not quite sure how to make DataTables understand they exist. If you could point me to an example or outline what I would need to do to accomplish this I would appreciate it.

Thanks,
Joseph Crawford

jcrawford

ok so i have this code, however it does not seem to work when i type in the text box with the id of #start_date


Any thoughts why this would tell me that oTable.fnServerData() is not a function?

oTable.fnServerData is not a function
[Break On This Error] $('#start_date').keypress( function() { oTable.fnServerData(); } );

[code]
var oTable;
$(document).ready(function() {
oTable = $('#reports').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "pages/tabledata/reports.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "start_date", "value": $('#start_date').val() } );
aoData.push( { "name": "end_date", "value": $('#end_date').val() } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
},
"aoColumns": [
{ "sName": "date" },
{ "sName": "product" },
{ "sName": "sale_type" },
{ "sName": "sales_submitted" },
{ "sName": "sales_declined" },
{ "sName": "sales_successful" },
{ "sName": "billed_submitted" },
{ "sName": "billed_declined" },
{ "sName": "billed_submitted" },
{ "sName": "avg_days_back" }
]
} );
$('#start_date').keypress( function() { oTable.fnServerData(); } );
} );
[/code]

Any thoughts why this would tell me that oTable.fnServerData() is not a function?

oTable.fnServerData is not a function
[Break On This Error] $('#start_date').keypress( function() { oTable.fnServerData(); } );

Thanks,
Joseph Crawford

allan

Easy answer is "cos it's not" :-). The more complex answer is that fnServerData is not exposed as part of the public API - it's an initialisation parameter, but not a callable function. All you need to do is call fnDraw() which will redraw the table - thus kicking the internal fnServerData.

Allan

Alawrence

We did this using Jquery Datepicker and simply pass the values to the data source.

[code]

aoData.push( { "name": "datefrom", "value": document.getElementById('from').value} );
aoData.push( { "name": "dateto", "value": document.getElementById('to').value} );

[/code]

Then in the Datepicker function call we simply added :
[code]
if ((document.getElementById('from').value !=='From') && (document.getElementById('to').value !=='To')){
oTable.fnFilter(document.getElementById('cname').value);
}
[/code]

This way each time the date selection was made it triggered the data refresh. But as with everything there are many ways to pull it off this just happened to be what worked for us. Hopefully it leads you to a solution

Eric_DeCoff

Ok here is what I did to use jquery datepicker plugins ( Notice I use #pricing instead of #example)

[code]
$('#pricing').dataTable({
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
rest of your take setup here
});
[/code]

Next setup handling

[code]
// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});

// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});

// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});

[/code]