DataTables 1.5 beta (server-side processing and more)

tdktank59

Alright finally got around to trying to implement this fnReloadAjax() plugin.

Heres the code I used

http://tkensiski.pastebin.com/m60c101e1

*There is the table and stuff as well, this is just the javascript parts that control the table.

However When I click the dropdown which works.

I reloads twice, the first time with all the parameters, second time without...
the first one is page load, the second and thrid are done when I change the dropdown.

http://img156.imageshack.us/img156/1328/31363843.png

allan

Ah - you are using server-side processing as well as fnReloadAjax - that's what will be causing the double Ajax get. You don't want to use fnReloadAjax if you are using server-side processing because with the latter a call is made to the server on each draw anyway.

What you can do here is pass custom variables (or manipulate the variables that DataTables sends to the server) using something like that shown in this example:
http://datatables.net/1.5-beta/examples/server_side/custom_vars.html

You can also modify the sSourceAjax parameter from the settings object (fnSettings()) if you want to change the get address. Then calling fnDraw() will update the table.

Allan

tdktank59

Thats about how far I got...

However I need to when the dropdown changes to refresh the data. (AKA get the info from the database)

allan

Okay so just attach a 'change' event handler to the dropdown menu:

$('#whatever select').change( function() { oTable.fnDraw(); } );

If you want to do more clever stuff such as changing the source URL you can do so here.

Allan

tdktank59

Nah just need to get the values from the dropdowns which is easy... Just need to send the ajax request again to get the new data based on the dropdowns and everything

allan

I'm confused :-). Have you managed to do what you are looking for or not? It sounds like you have. If so - fantastic!

Allan

tdktank59

No, Not exactly...

I am able to get the values from the dropdowns...

However I have yet to figure out how to make it reload the data when i select a value from the dropdowns.

(this is separate from the tables filters)

allan

So do you want to change the data source (the url) when a value in the drop down is selected?

That could be done using the 'change' event handler and something like:

oTable.fnSettings().sAjaxSource = "whatever";
oTable.fnDraw();

Allan

sumithra

I am new jquery. I have to use the datatables in my project and access the data entered to the table in server side to update the database on submit. Can you please suggest me how can i do this?

fbas

Most of us use the editable plugin to modify data and send back to the server side:

http://code.google.com/p/jquery-datatables-editable/

jeditable is a separate script written on jquery. data tables utilizes it to set up editable cells and to send data back to the server side.

this demo lets you see how editing a cell looks and feels:
http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit.html

There's an example page somewhere (I can't find it) where someone opens the entire row for editing.

swathigude

Hi

I'm new to this Data table. I have datatable with a another submit button on my page.
I'm developing dattable with server side processing. I'm able to edit cell and sorting filtering on server side.

but when button click i want to pass 2 parameter to the server.
how can i achieve this..
here is my code sample which i used:
var oTable = $('#tblAdjustmentErrorFile').dataTable({

"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "AdjustmentErrorFileHandler",
"aoColumns": [
{
"bVisible": false
}, //ID is hidden
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{
"bVisible": false
}, //ID is hidden
{
"bVisible": false
} //ID is hidden

],
"fnServerData": function (sSource, aaData, fnCallback) {

aaData.push({ "name": "region", "value": '<%=region%>' });
aaData.push({ "name": "macId", "value": '<%=macId%>' });
$.getJSON(sSource, aaData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});

},

"aLengthMenu": [[10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"]]

}).makeEditable({

sUpdateURL: "UpdateAdjErrorFile",

"aoColumns": [

null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,

null,
null,
{
type: 'textarea',
submit: 'Save changes',
rows: 3,
columns: 10

}



],


fnShowError: function (message, action) {
switch (action) {
case "update":
//jAlert("Value cannot be empty or can have special characters", "Update failed");
jAlert(message, "Updated with");
break;

}


}

and the button click:

$("button[name=SearchButton]").click(function () {

var oSettings = oTable.fnSettings();
oSettings.fnServerData = function (sSource, aaData, fnCallback) {

aaData.push({ "name": "region", "value": '<%=region%>' });
aaData.push({ "name": "macId", "value": '<%=macId%>' });

$.getJSON(sSource, aaData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});


}


});
can any one suggest me whats wrong in my code? how to achieve button click and pass parameters on server side



});


});