What I want to do is to modify the sAjaxSource of the datatable if a value in combo box changes and then I want to call the fnDraw() function of the datatable
Datatable is:
$("#example").dataTable({
"aoColumns": [
{ "sTitle": "Id" },
{ "sTitle": "Name" }],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '@Url.Action("FetchData", "Home")',
"sPaginationType": "full_numbers",
});
What I have so far is:
C# code:
public JsonResult GetData(DataTableParameters param, int? SelectedId)
{
//return the results
}
And the javascript code for change of value is:
$('#SelectedId').change(function () {
alert("Hi");
$("#example").dataTable(
{sAjaxSource:"/home/FetchData?SelectedId=1"}).fnDraw(true); ;
});
It reaches alert("Hi") point but it doesn't redraw the table. How do I get it to work?
Explanation
To use the API for datatables you need to have a handle first.
The .dataTable
function returns a handle to the datatable created.
So, doing this
var oTable = $("#example").dataTable({
...
});
oTable.fnDraw();
should allow you to access and execute the functions for a specific table.
Information
Datatables doesn't support changing the settings after it's been initialized, and for a good reason.
//This does *NOT* work.
var oTable = $("#example").dataTable({
...
});
var oSettings = oTable.fnSettings();
oSettings.sAjaxSource = "some_url";
//Nothing will happen
oTable.Draw();
However, you could try using the fnServerData
function to intercept the request before it is sent, and then just update the table with your own url whenever the change occur.
Or
You could destroy the table and reinitialize it.
To learn more about fnServerData, click here and search for "fnServerData".
Solution
I'm unsure whether or not this actually works, I haven't done it before, but it should work.
var currentSource = "this_url";
var oTable = $('#example').dataTable( {
"bServerSide": true,
"bProcessing": true,
"aoColumns": [
{"sTitle": "id"},
{"sTitle": "name"}
],
"sPaginationType": "full_numbers",
"sAjaxSource": currentSource,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": currentSource,
"data": aoData,
"success": fnCallback
});
}
});
$("#SelectedId").change(function)(){
currentSource = "new_url";
oTable.fnDraw(); //or fnReloadAjax()
});
Alternative Solution
An alternative would be to destroy the table and then reinitialize it with the new settings. This is, however, a very ineffective way of handling it.
var initParams = {
"bServerSide": true,
"bProcessing": true,
"aoColumns": [
{"sTitle": "id"},
{"sTitle": "name"}
],
"sPaginationType": "full_numbers",
"sAjaxSource": "this_url",
};
var oTable = $('#example').dataTable(initParams);
$("#SelectedId").change(function)(){
oTable.fnDestroy();
initParams.sAjaxSource = "new_url";
oTable = $('#example').dataTable(initParams);
});
Sidenote
When you've got bServerSide = true
you have to take care of everything, and that means it complicates everything too!
Happy coding! :)