CODEWITHSUNDEEP
javascriptjquerydatatables
Wandering Digital
Wandering Digital

Reputation: 1868

Datatables with serverside JSON (custom object)

I am trying to quickly create a simple display of results from an internal API using DataTables. The API returns JSON in the following structure:

obj { 
    status: 1,
    results: 100,
    offset: 25,
    limit: 25,
    data: [
        [1]: {
           title: "Blah blah one",
           description: "Doesn't really matter",
           misc: "Yadda yadda"
        },
        [2]: {
           title: "Blah blah two",
           description: "Doesn't really matter",
           misc: "Yadda yadda"
        },
    ]
}

I can't/don't want to change the API structure just because DataTables uses a weird structure, but I would like to access the built in functionalities for paging, dynamic loading, etc. DataTables seems to allow for custom data objects, and I've gotten the table to load with the following:

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://api.oursite.com/api?limit=100",
        "fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
            oSettings.jqXHR = $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "jsonp",
                "cache": false
            } );
        },
        "sAjaxDataProp": "data",
        "aoColumns": [
            { "mData": "title" },
            { "mData": "description" },
            { "mData": "misc" },
        ]
    } );
});

But, none of the paging or sorting functions work. I think this is because DataTables requires a results count and paging variable in the object— "iTotalRecords" and "iTotalDisplayRecords". Is this correct? Is there any way to use the api variables instead? Thanks in advance. I'm currently not getting any errors in the dev console, so if it's erroring it's doing so silently...

Upvotes: 2

Views: 2810

Answers (1)

hanskishore
hanskishore

Reputation: 361

While initializing the datatable, instead of directly assigning source to Ajaxsource, you can set the aaData to the javascript function where you can manipulate to return only obj.data. You need handle few things manually.

     $('#tblExample').dataTable({
        "bJqueryUI": true,
        "bDestroy":true,
        "bSortable": false,
        "sAjaxSource": "",
        "aaData":GetData(),
        "aoColumns": [
                    {   
                      "sTitle":"Index","mDataProp": null, "sWidth": "20px", "sDefaultContent": "<span class='ui-icon ui-icon-circle-close' onclick='RemoveActiveItem(this);'></span>", "bSortable": false},
                    {   "mDataProp": "Year"},
                    {   "mDataProp": "Month"},
                    {   "mDataProp": "Savings"}         
        ]
    });

Upvotes: 2

Related Questions