Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Tastypie as an Ajax Source for DataTables
$('#participantes-table').dataTable({
bProcessing: true,
bServerSIde: true,
sAjaxSource: "/path/to/your/tastypie/api/list/objects/?format=json",
sAjaxDataProp: "objects",
aoColumns: [
// Put the resource name that corresponds to each table column
{'mData': "your"},
{'mData': "columns"},
],
fnServerData: function(source, oaData, callback, settings) {
settings.jqXHR = $.get(
source,
function(data){
// Magic happens here! tastypie provides the data but
// stupid dataTables requires it to have stupid names
data.echo = oaData.echo;
data.iTotalRecords = data.meta.total_count;
data.iTotalisplayRecords = data.meta.limit;
console.debug(data);
console.debug(callback);
callback(data);
},
'json')
},
});
@elmarcoh
Copy link
Author

elmarcoh commented Oct 26, 2012

Obviously the echo part is a little hacky (insecure) but you get the idea :]

@thibault
Copy link

thibault commented Feb 7, 2014

Hi @Arkanus,

Your code really helped me out, but I met a few problems with it. So I'm just gonna leave this here, in case anyone follows me on this gist:

$('#log-table').dataTable({
    bProcessing: true,
    bServerSide: true,
    sAjaxSource: "{{ api_url }}",
    sAjaxDataProp: "objects",
    aoColumns: [
        { mData: 'asset', },
        { mData: 'date', },
    ],
    fnServerData: function(source, oaData, callback, settings) {
        oaData.push({ name: 'limit', value: settings._iDisplayLength });
        oaData.push({ name: 'offset', value: settings._iDisplayStart });

        settings.jqXHR = $.get(
            source,
            oaData,
            function(data) {
                data.sEcho = oaData.sEcho;
                data.iTotalRecords = data.meta.total_count;
                data.iTotalDisplayRecords = data.meta.total_count;
                callback(data);
            },
            'json'
        )
    },
});

@phoebebright
Copy link

phoebebright commented Feb 21, 2014

Thanks so much to both of you for saving me from having to work this out on my own!

@zerosoul13
Copy link

zerosoul13 commented Aug 26, 2014

Thank you very much for sharing this Gist. Worked like a charm!

Had to change:

    oaData.push({ name: 'limit', value: settings._iDisplayLength });
    oaData.push({ name: 'offset', value: settings._iDisplayStart });

To this:

    oaData['limit'] =  settings._iDisplayLength;
    oaData['offset'] = settings._iDisplayStart;

Now, pagination wasn't working (clicked on the buttons but never got different results) so after checking the docs changed oaData to aoData and that fixed it.

@steph-ben
Copy link

steph-ben commented Feb 27, 2015

Thanks a LOT for this snippets. I beleive DataTable and Tastypie are really great ! Wonder how other people do, actually :)

The previous answers were not working for me. Here is minor modification of what I ended-up. I activated sorting and searching as well.

    conf = {
        processing: true,
        serverSide: true,
        bProcessing: true,
        bServerSIde: true,
        sAjaxSource: '{% url 'api_dispatch_list' 'v1' 'your_resource_name' %}',
        searchDelay: 1000,
        sAjaxDataProp: "objects",
        aoColumns: [
            // Put the resource name that corresponds to each table column
            {'mData': "you_resource_field"},
        ],
        fnServerData: function(source, oaData, callback, settings) {
            // Convert parameters from DataTable to Tastypie
            var param = {
                'limit': settings._iDisplayLength,
                'offset': settings._iDisplayStart,
            }

            // Handle search ... to be customized of course
            if (oaData[10] !== undefined) {
                param['header__icontains'] = oaData[10].value
            }
            // Handle sorting ... to be customized of course
            var header_sorted = oaData[12].value;
            var header_sort_direction = oaData[13].value;
            if (header_sorted === 0) {
                if (header_sort_direction === 'asc') {
                    param['order_by'] = 'header';
                }
                if (header_sort_direction === 'desc') {
                    param['order_by'] = '-header';
                }
            }

            settings.jqXHR = $.ajax({
                url: source,
                data: param,
                success: function(data) {
                    data.sEcho = oaData.sEcho;
                    data.iTotalRecords = data.meta.total_count;
                    data.iTotalDisplayRecords = data.meta.total_count;
                    callback(data);
                },
                dataType: 'json'
            })
        },
    }
    $('table').DataTable(conf);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment