Search code examples
javascriptjqueryajaxdatatablesjson-rpc

Get to customize Jquery datatables GET request parameters that will be sent to the server


I'm using Jquery datatables and i would like when loading a page that it sends a customized GET request to the server not the default GEt request it sends. This is the JS section where it sends the request on load

$(document).ready(function() {
    oTable=$('#ip_data').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": true,
        "bScrollCollpase": true,
        "sScrollY": "200px",
        "sAjaxSource": "/url"                                                           
    });
});

where #ip_data is the html table id now with onload it works perfectly and this is the request headers it sends

http://domain.com/getdata?sEcho=1&iColumns=5&sColumns=%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSe arch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=1&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=2&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=3&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=4&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&sSearch=&bRegex=false&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&_=1402738395413

Now the server i'm working with is Rpc and it must get a method and params and id keys with the params part carrying the big chunk of data i.e to make the one shown above to something like this below which i have manually used and it has worked. the differences include

1 the addition of method=method
2 separation of method ,params and id by use of ';'
3 params={...} which is valid json
4 id=1

http://domain.com:5000/?method=datatables;params={"sEcho":"1", "iColumns":"5",    "sColumns":",,,,", "iDisplayStart":"0", "iDisplayLength":"10", "mDataProp_0":"0", "sSearch_0":"", "bRegex_0":"false", "bSearchable_0":"true", "bSortable_0":"true", "mDataProp_1":"1", "sSearch_1":"", "bRegex_1":"false", "bSearchable_1":"true", "bSortable_1":"true", "mDataProp_2":"2", "sSearch_2":"", "bRegex_2":"false", "bSearchable_2":"true", "bSortable_2":"true", "mDataProp_3":"3", "sSearch_3":"", "bRegex_3":"false", "bSearchable_3":"true", "bSortable_3":"true", "mDataProp_4":"4", "sSearch_4":"", "bRegex_4":"false", "bSearchable_4":"true", "bSortable_4":"true", "sSearch":"", "bRegex":"false", "iSortCol_0":"0", "sSortDir_0":"asc", "iSortingCols":"1" };id=1

I know js and jquery can do the above but i haven't been succesful with jquery datatables since i can't get where to make a customized request to te server to what i want. Help apreciated.


Solution

  • In order to customize the request you need to add fnServerData in datatable initialization parameter with the function having customized ajax call as shown below. you can access the source, default data in aoData, callback function and settings, now you can add your own customized data like this,

    aoData["MyCustomValue"] = 123;
    

    or you can simply overwrite aoData object, its up to you
    I have made a post request here.

    $(document).ready(function() {
        oTable=$('#ip_data').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "bPaginate": true,
            "bScrollCollpase": true,
            "sScrollY": "200px",
            "sAjaxSource": "/url",
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                aoData["MyCustomValue"] = 123;
                oSettings.jqXHR = $.post(sSource, aoData, fnCallback, "json");
            }
        });
    });