Apply AJAX success data to

vlince

Hello all,

I have a C# ASP.NET MVC 2.0 application.
In one of my Views, I transform a using datatables.

The has 4 columns: Id, FirstName, LastName, RoleId

Since I have 4 000 records, I’m using AJAX server-side processing to load the records which works great!

The RoleId column can have the following values: 1, 2, 3 or 4 depending on the RoleId of the person.

When the page loads for the first time, it shows 10 of 4000 records. Because I have 4 000 records, sorting by the RoleId column becomes a problem if I wish to see the people with RoleId “3” because I’ll have to page and page until seeing the RoleId “3”.

To overcome this problem, I’ve decided to create an additional at the top of the first one which holds 4 checkboxs with the Role Name and an “Apply Filter” button.

The user now has the flexibility to select one (or more) roles he wishes to view and click the “Apply Filter” button.

When clicking the “Apply Filter” button, I call a javascript function like so:
[code]

$(document).ready(function() {
//Filter button click
$('#btnApplyFilter').click(function() {
ShowDataForRole();
});

function ShowDataForRole() {
//Get the checked, checkboxes
var roles = new Array();
$.each($("input[name=roles]:checked"), function() {
roles.push($(this).val());
});

//Get data passing the selected role(s)
$.ajax({
url: '<%=Url.Action("GetData","Home")%>',
global: false,
type: "GET",
data: ({
filtersByRoles: roles.join(",")
}),
dataType: "json",
async: false,
error: function(e) {
alert(e);
},
success: function(data) {
//FIX ME
}
})
}

});

[/code]

This calls my GetData() method from my Home Controller and I pass along the “filtersByRoles” parameters (which holds the selected checkboxes if any).

The Controller fetches the appropriate data…no problem…

My question is what to do in the *success* function with my returned *data*?
How can I apply this returned *data* to my to replace the existing ones that was initially loaded with the 4 000 records ?

Thanks
Vince

fbas

It would be simpler to have a fnServerData function that reads the values from your checkboxes and adds the parameter there.

Then all your button needs to do is call a refresh to the table (fnDraw or fnStandingRedraw). You could even do away with the button altogether and just capture the checkbox state events.

or you could look into the fnCallback that is passed into fnServerData and when you find that function, run it on your data (assuming your ajax call returns JSON data that is compatible with what datatables expects in its fnServerData)

looking into the jquery.dataTables.js file, the code Allan uses is: [version 1.8.1 line 2387]
[code]
var iAjaxStart=oSettings.iInitDisplayStart; // this is a few lines above, 2328

function(json) {
var aData = json;
if ( oSettings.sAjaxDataProp !== "" )
{
var fnDataSrc = _fnGetObjectDataFn( oSettings.sAjaxDataProp );
aData = fnDataSrc( json );
}

/* Got the data - add it to the table */
for ( i=0 ; i

vlince

Hey fbas, thanks for the quick reply :-)

Basically, If I understand correctly, the code example I gave is pretty much *useless/overkill* since there is a better way to achieve what I want without having to create a click event and call a custom function is that right?

In addition, I could completely get ride of the “Apply Filter” button and capture the click event of the checkboxes. Humm…

The initial reason for having the “Apply Filter” button was to not automatically *trigger* an AJAX call each time the user checks (or unchecks) the checkboxes.

I figured, it would be more efficient to allow the users to first check (or uncheck) the checkboxes and then click the “Apply Filter” button making only *one* server-side call to the database.

Since I’m all for learning new stuff/ways, I’m willing to give this a try :-)
---------

Assuming I add the following fnServerData parameter:

[code]
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({ "dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
[/code]

According to the documentation, [quote]the fnServerData allows me to *override* the default function which obtains the data from the server.[/quote]

If I understand correctly…this means I can use this function to send additional parameters (such as the values of the checkboxes that are checked) *before* the actual server-side code gets executed right?

If that is correct and since all 4 of my checkboxes are “unchecked” by default, the first time the page loads, I’ll always get my 4 000 records (which is fine with me).

What I don’t seem to grasp is: what happens when I “check” a checkbox?
a) Where do I place the code that captures the event
b) Once I do manage to capture the event, how do I pass that value to the server-side?
c) What happens if I click more then one checkboxe…will I have a call to the server each time a checkbox is clicked? Can I simply allow the user to make his/her selection then click some sort of “Apply” button this way I get all at once the checked checkboxes and make one call to the server?

If you have the time, perhaps you could show me a quick example of what I’m expected to see inside the fnServerData function call!

[code]"fnServerData": function(sSource, aoData, fnCallback) {}[/code]


Needless to say, I thank you once again fbas for all the help you’ve given me so far!
Sincerely

Vince

fbas

If you want to keep the button, that's fine. And that will be the entry point to kicking off the server-side fetch.

with fnServerData, you are merely intercepting the server call, giving you a chance to add some parameters to the column based fields that DataTables is going to send. You will need to kick off the AJAX call, but with the results (JSON) you call the function that DataTables passed in (fnCallback) so it still does the same processing.

[code]
/* POST data to server */
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '<%=Url.Action("GetData","Home")%>',
"fnServerData": function ( sSource, aoData, fnCallback ) {
// this is where your code goes:
var roles = new Array();
$.each($("input[name=roles]:checked"), function() {
roles.push($(this).val());
});

aoData.push( { "name": "checkboxes", "value": roles.join(",") } );

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
[/code]


to get your button to cause the server fetch, have your handler call fnDraw() or fnStandingRedraw() or some other function that affects a fetch when using server side processing.

vlince

Oh my god fbas…

YOU are a true *GOD* …seriously!

You should’ve been born with a *donation* button!

On behalf of the human race, thank you!

Sincerely
Vince

fbas

I can't take any credit. I'm just learning this stuff myself. but if I can help out, I try - it makes me a better problem solver and coder when I look over other people's code or try to tackle problems they're interested in solving.

Allan is the architect of this table greatness. and yes, he deserves donations to keep up development.