Question

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?

Answer 1

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! 🙂