数据表：自定义响应处理 [英] DataTables: Custom Response Handling

问题描述

我开始工作 AngularJS 和的 数据表 ，并怀疑它是否是可以自定义的响应数据表期待。该数据表插件目前的期望是这样的：

I started working on AngularJS and DataTables and wonder whether it is possible to customize the response DataTables is expecting. The current expectation of the DataTables plugin is something like this:

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

在服务器端，该API的正在由 Django的tastypie处理

On the server end, the API's are being handled by django-tastypie

从服务器的响应是：

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

     objects: [...]
 }

那么，有没有一种方法来调整数据表插件接受/图这种反应，不然我就必须找到一种方法来预期字段添加到API？

So, is there a way to tweak Datatables Plugin to accept/map this response, or I'll have to find a way to add expected fields to the api?

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

So far I've done this:

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

任何帮助将AP preciated。

Any help will be appreciated.

在此先感谢:)

推荐答案

您可以通过一个函数的数据表 AJAX 选项，这会给你完全控制如何获取并传递到数据表之前映射数据。

You can pass a function to the DataTables ajax option, this will give you full control over how to fetch and map the data before passing it to 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。

由于这个问题被打上角，这里是使用角的DataTable 的一个解决方案。

As this question is tagged with Angular, here's a solution for those using 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'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
    ];
});

解决方法上面已经过测试角数据表0.3.0 +数据表1.10.4。

The solution above has been tested with angular-datatables 0.3.0 + DataTables 1.10.4.

¹这里要注意的重要组成部分，是该角的DataTable解决方案需要 .withDataProp（'数据'）来工作，而纯jQuery的数据表解决方案不具备一个数据：数据选项

¹ The important part to note here is that the angular-datatables solution requires .withDataProp('data') to work, while the pure jQuery DataTables solution does not have a data: 'data' option.

这篇关于数据表：自定义响应处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！