Help With Date Range Filtering on Server Side Processring

gunjannigam

I am using databales with server side processing to filter my data based on the date range. I was looking at this discussion http://www.datatables.net/forums/discussion/2103/date-range-filter-serverprocessing/p1 and I was able to use it in my code
My current example webpage link is http://monitor.x10.mx/example.php
I construct the date range based on using text fields and select list. When my page loads the table is drawn correctly.
But now I want to change my date range and then fire and change event on Update link click. I don't know how to redraw with range filter values my data Table on click event. Which API should I use??
Following is my code
[code]




function updateTime()
{

var fromDate = document.getElementById('startDate').value;
var toDate = document.getElementById('endDate').value;
var fromHour = document.getElementsByName('fromHour').item(0).value;
var fromMin = document.getElementsByName('fromMin').item(0).value;
var toHour = document.getElementsByName('toHour').item(0).value;
var toMin = document.getElementsByName('toMin').item(0).value;

var iFini= fromDate+" "+fromHour+":"+fromMin+":00";
var iFfin = toDate+" "+toHour+":"+toMin+":";
var returnArray = new Array();
returnArray[0] = iFini;
returnArray[1] = iFfin;
return returnArray;
}
var asInitVals = new Array();
$(document).ready(function() {


var oTable = $('#example').dataTable( {
"bProcessing": true,
"bFilter":true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "scripts/server_processing.php",
"aaSorting": [ [0,'desc'] ],

"aoColumnDefs": [


{ "sClass": "center", "aTargets": [ 0,1,2,3,4] }
],
"oLanguage": {
//"sSearch": "",
"sInfoFiltered": ""
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some data to send to the source, and send as 'POST' */
var time = updateTime();
aoData.push( { "name": "min", "value": time[0] } );
aoData.push( { "name": "max", "value": time[1] } );

$.ajax( {
"dataType": 'json',
"type": "GET",
"url": "scripts/server_processing.php",
"data": aoData,
"success": fnCallback
} );

}
} );
//oTable.fnDraw();


} );
$('#update').click( function () {oTable.fnDraw();} );

[/code]

allan

Given that you are sending the mix and max parameters to the server on each draw, all you need to do is call fnDraw (like what you've done in you #update handler). The server-side script will of course need to be able to handle the two extra parameters, but that's the basic idea.

Allan

gunjannigam

[quote]Given that you are sending the mix and max parameters to the server on each draw, all you need to do is call fnDraw (like what you've done in you #update handler).[/quote]
I want the page to be updated on updated click so I am calling the [code]oTable.fnDraw();[/code] as you see in my code.
[quote]The server-side script will of course need to be able to handle the two extra parameters[/quote]
The server side script is capable of handling these two parameters, that's why I am getting the correct output when the page loads initially.

The problem I am facing is reloading serverData on update click. I am sure fnServerData is not updated when I call oTable.fnDraw(); on update click. What should I do so that fnServerData is updated

fbas

your variable oTable is out of scope in the #update.click()

you declared var oTable inside the document.ready() function/closure, but your #update.click() is outside that closure.

this will likely be why oTable.fnDraw() is not re-drawing your table (and pulling data from the DB)


2 solutions are:

1) declare var oTable outside of that function (make it global)

or

2) include $('#update').click( function () {oTable.fnDraw();} ); within the $(document).ready() function.