Ajax DataTables：自定义响应处理

我开始研究和，想知道是否有可能定制

DataTables

期望的响应。DataTables插件目前的预期如下：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 5,
    "data": [...]
}

在服务器端，API由

来自服务器的响应是：

{
     meta: {
        limit: 20,
        next: null,
        offset: 0,
        previous: null,
        total_count: 2
     },

     objects: [...]
 }

那么，有没有办法调整Datatables插件以接受/映射此响应，或者我必须找到一种方法将预期字段添加到api中

到目前为止，我已经做到了：

    var deptTable = angular.element('#deptManagementTable').DataTable({
        processing: true,
        serverSide: true,
        pagingType: "simple_numbers",
        ajax: {
            url: "/client/api/v1/departments/",
            data: function(d) {
                d.limit = d.length;
                d.offset = d.start;
                d.dept_name__icontains = d.search.value;
            },
            dataSrc: function(json) {
                for (var i=0, len=json.objects.length ; i<len ; i++) {
                    json.objects[i].DT_RowId = json.objects[i].dept_id;
                }
                return json.objects;
            }
        },
        aLengthMenu: [
            [5, 25, 50, 100],
            [5, 25, 50, 100]
        ],
        iDisplayLength: 5,
        columns: [
            {
                data: "dept_name"
            },
            {
                data: "dept_created_on",
                render: function ( data, type, full, meta ) {
                    var dateCreated = new Date(data);
                    dateCreated = dateCreated.toLocaleDateString();
                    return dateCreated;
                }
            }
        ]
    });

var deptTable=angular.element（'#deptManagementTable'）.DataTable({
处理：对，
服务器端：是的，
pagingType:“简单数字”，
阿贾克斯：{
url:“/client/api/v1/departments/”，
数据：功能（d）{
d、 极限=d.长度；
d、 偏移=d.开始；
d、 dept\u name\uu icontains=d.search.value；
},
dataSrc：函数（json）{
对于（var i=0，len=json.objects.length；i您可以将函数传递给DataTables，这将使您能够完全控制在将数据传递给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's 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 1.10.4进行了测试


由于这个问题带有Angular标记，这里有一个解决方案供使用

上述解决方案已使用角度数据表0.3.0+数据表1.10.4进行了测试

这里需要注意的重要部分是angular datatables解决方案需要
。withDataProp（'data'）
才能工作，而纯jQuery datatables解决方案没有
数据：'data'
选项。
这个答案非常有用，但在当前的环境下（目前为1.10.12）似乎有点过时datatables的版本，这实际上使生活变得更容易（或至少更可读）

在当前版本下，您可以在声明中执行以下操作（请记住，tastypie需要为要使用的字段设置filterable&ordering选项）

现在，您可以通过在函数中执行data.attr来访问ajax请求中提交的数据

这假设您希望将搜索限制为一个字段，但可以很容易地用ajax函数中do console.log（data）的相同方式进行扩展，以查看发送的内容

var table=$（'#tableName'）.DataTable({
“延迟渲染”：正确，
“服务器端”：正确，
“ajax”：函数（数据、回调、设置）{
var sort\u column\u name=data.columns[data.order[0].column].data.replace（/\./g，“\uuu”）；
var方向=”；
if（data.order[0].dir==“desc”）{direction=“-”}；
$.get（'your/tasty/pie/url？format=json'{
限制：data.length，
偏移量：data.start，
您的搜索字段搜索属性：data.search.value，
排序依据：方向+排序列名称
}，功能（res）{
回拨({
记录总数：res.meta.total\u计数，
过滤的记录：res.meta.total\u计数，
数据：res.objects
});
});
},
“栏目”：[
{“data”：“column_1”，“orderable”：false}，
{“数据”：“第2列”}，
{“数据”：“第3列”}
],
“订单”：[[1，“asc”]]
});
我从谷歌找到了这个问题，但没有任何答案，我花了几个小时努力解决了同样的问题，所以这里有一个解决方案供未来读者参考。我还没有测试代码，但对我来说似乎是一个简洁的解决方案，所以接受了答案。非常感谢分享这个解决方案。谢谢。我首先使用，和transl编写了这个解决方案将其添加到您的问题所使用的常规jQuery DataTables插件。然后我对其进行了测试并修复了一些错误。我可以更新答案以添加角度DataTables解决方案。这是一个很棒的解决方案，因为这允许DataTables请求绑定到$http拦截器，否则将需要非角度解决方案和额外的解决方案问题。
<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's 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
    ];
});