Using Tastypie as an Ajax Source for DataTables

table_init.js

$('#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')
	},
});

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

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'
        )
    },
});

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

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.

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);