Таблицы данных: обработка пользовательских ответов

Ответ 1

Вы можете передать функцию в параметр DataTables ajax, это даст вам полный контроль над тем, как извлекать и сопоставлять данные, прежде чем передавать их в DataTables.

.DataTable({
    serverSide: true,
    ajax: function(data, callback, settings) {
        // make a regular ajax request using data.start and data.length
        $.get('/client/api/v1/departments/', {
            limit: data.length,
            offset: data.start,
            dept_name__icontains: data.search.value
        }, function(res) {
            // map your server response to the DataTables format and pass it to
            // DataTables' callback
            callback({
                recordsTotal: res.meta.total_count,
                recordsFiltered: res.meta.total_count,
                data: res.objects
            });
        });
    }
});

Решение выше было протестировано с помощью jQuery DataTables 1.10.4.

Поскольку этот вопрос помечен Angular, здесь решение для тех, кто использует angular-datatables.

<div ng-controller="testCtrl">
    <table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</div>

.controller('testCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('serverSide', true)
        .withOption('ajax', function(data, callback, settings) {
            // make an ajax request using data.start and data.length
            $http.get('/client/api/v1/departments/', {
                limit: data.length,
                offset: data.start,
                dept_name__icontains: data.search.value
            }).success(function(res) {
                // map your server response to the DataTables format and pass it to
                // DataTables' callback
                callback({
                    recordsTotal: res.meta.total_count,
                    recordsFiltered: res.meta.total_count,
                    data: res.objects
                });
            });
        })
        .withDataProp('data'); // IMPORTANT¹

    $scope.dtColumns = [
        // your column definitions here
    ];
});

Решение выше было протестировано с помощью angular -datatables 0.3.0 + DataTables 1.10.4.

¹ Важно отметить, что для решения angular -datatables требуется .withDataProp('data') работать, в то время как чистое решение jQuery DataTables не имеет опции data: 'data'.

Ответ 2

Этот ответ был очень полезен, но кажется немного устаревшим в контексте текущей (1.10.12 на данный момент) версии данных, что на самом деле делает жизнь намного проще (или, по крайней мере, более удобочитаемой).

В текущей версии вы можете сделать что-то вроде следующего в своем объявлении (имея в виду, что tastypie должен иметь параметры фильтрации и заказа, заданные для полей, которые вы хотите использовать).

Теперь вы можете получить доступ к данным, отправляемым в запрос ajax, выполнив функцию data.attr внутри функции.

Предполагается, что вы хотите ограничить поиск одним полем, но его можно легко расширить таким же образом, что и console.log(data) внутри функции ajax, чтобы увидеть, что отправлено.

var table = $('#tableName').DataTable({
    "deferRender":true,
    "serverSide": true,
    "ajax": function(data, callback, settings) {
        var sort_column_name = data.columns[data.order[0].column].data.replace(/\./g,"__");
        var direction = "";

        if (data.order[0].dir == "desc") { direction = "-"};

        $.get('your/tasty/pie/url?format=json', {
            limit: data.length,
            offset: data.start,
            your_search_field__searchattr: data.search.value,
            order_by: direction +sort_column_name
        }, function(res) {
            callback({
                recordsTotal: res.meta.total_count,
                recordsFiltered: res.meta.total_count,
                data: res.objects
            });
        });
    },
    "columns": [
        { "data":"column_1", "orderable": false },
        { "data":"column_2" },
        { "data":"column_3" }
    ],
    "order": [[1, "asc"]]
});