Help using http post to update table data

Gmeikle

Hi,
I am new to web development (but do have some experience with database's and java). I am trying to write a web app which takes some data from a mysql database. I have updated the server_processing.php script and it returns the data I need(a combination of data from multiple tables using SQL join). I have also updated the where clause to take in additional parameters using http get request. I have a query page which then moves to a results page which works fine.

However, I would like to merge these 2 pages. What I want is the results page to have the table and an HTML form which has some combo box's etc. When the user hits the submit button I would like the data in the table to be updated. I see there is a post function but I can't see how set this up correctly?

Does anyone know how to help me?

Thanks,
Gregor

allan

Hi Gregor,

What I think you need to do is to use the fnServerData callback function to send the parameters needed for your server side script, reading them from the form. This can be done something like this: http://datatables.net/examples/server_side/custom_vars.html . If you want to use POST you can do something like this: http://datatables.net/examples/server_side/post.html .

Regards,
Allan

Gmeikle

Hi Allan,
Thanks for that. I can see I can use aoData.push to pass some variables on initialisation using fnServerData. I guess I am a little stuck after that. If these variables are changed how do I pass then new variables to the server? I think my lack of Ajax understanding is the problem here? Do you know of any live examples where this has been implemented using a separate form for passing the user input? I will bash on and see if I can get something to work.
Thanks
Gregor

allan

Hi Gregor,

What you can do is something like this:

[code]
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "extra_filter", "value": $('#my_filter').val() } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
} );

$('#my_filter').keyup( function () {
oTable.fnDraw();
} );
} );
[/code]
What is happening here is that I've attached an event handler to a fictitious input (type=text) element with an id of 'my_filter'. Whenever a key is pressed and released in that input the table's draw function is called - that will cause the table to go to the server and request the data set again - as you can see it is also passing the newly entered value of the filter as the parameter 'extra_filter'. This parameter could then be used as part of your WHERE statement to filter as you need. This can be extended to querying from other tables etc.

Hope this helps!
Allan

Gmeikle

Hi Allan,
Thanks very much. That's exactly what I was looking for. It's so simple in the end really. Thanks a lot.
Kind regards
Gregor

Gerardo

Related to this:

Can you change the code in the fnReloadAjax example to have [] instead of null as second parameter when calling fnServerData? Else the aoData.push as above would fail.

Thanks,
Gerardo

allan

@Gerardo - older versions of DataTables did indeed pass null as the second parameter to fnServerData when not using server-side processing, but just an Ajax source. However the currently release should indeed be giving an empty array for exactly this kind of reason.

Allan

Gmeikle

Hi Allan,
Thanks again for your example code it was just what I needed to point me in the right direction. I now have a separate form which reloads the table when the submit button is pressed, using the updated variables. Thanks again for your help.
Kind regards,
Gregor