数据表:自定义响应处理 [英] DataTables: Custom Response Handling
问题描述
我开始研究 AngularJS 和 DataTables 并想知道是否可以自定义 DataTables 期望的响应.目前对 DataTables 插件的期望是这样的:
<代码>{画":1，记录总数":57，记录过滤":5，数据": [...]}在服务器端，API 由 django-tastypie
来自服务器的响应是:
<代码>{元:{限制:20，下一个: 空，偏移量:0，上一个:空，total_count: 2},对象: [...]}那么，有没有办法调整 Datatables 插件来接受/映射这个响应，或者我必须找到一种方法来向 api 添加预期的字段?
到目前为止，我已经这样做了:
var deptTable = angular.element('#deptManagementTable').DataTable({处理:真实，服务器端:真，pagingType: "simple_numbers",阿贾克斯:{url: "/client/api/v1/departments/",数据:函数(d){d.limit = d.length;d.offset = d.start;d.dept_name__icontains = d.search.value;},数据源:函数(json){for (var i=0, len=json.objects.length ; i<len ; i++) {json.objects[i].DT_RowId = json.objects[i].dept_id;}返回 json.objects;}},aLengthMenu: [[5, 25, 50, 100],[5, 25, 50, 100]],iDisplayLength: 5,列: [{数据:部门名称"},{数据:dept_created_on"，渲染:函数(数据，类型，完整，元){var dateCreated = new Date(data);dateCreated = dateCreated.toLocaleDateString();返回日期创建；}}]});任何帮助将不胜感激.
提前致谢:)
您可以将函数传递给 DataTables ajax 选项，这将使您在将数据传递给 DataTables 之前完全控制如何获取和映射数据.
.DataTable({服务器端:真，ajax:函数(数据，回调，设置){//使用 data.start 和 data.length 发出常规的 ajax 请求$.get('/client/api/v1/departments/', {限制:数据长度，偏移量:data.start，dept_name__icontains: data.search.value}，功能(资源){//将服务器的响应映射到 DataTables 格式并将其传递给//数据表的回调打回来({记录总数:res.meta.total_count，过滤记录:res.meta.total_count，数据: res.objects});});}});上面的解决方案已经用 jQuery DataTables 1.10.4 测试过.
<小时>由于这个问题是用 Angular 标记的，这里有一个针对那些使用 angular-datatables 的人的解决方案.>
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>.controller('testCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('serverSide', true).withOption('ajax', function(data, callback, settings) {//使用 data.start 和 data.length 发出 ajax 请求$http.get('/client/api/v1/departments/', {限制:数据长度，偏移量:data.start，dept_name__icontains: data.search.value}). 成功(功能(资源){//将服务器的响应映射到 DataTables 格式并将其传递给//数据表的回调打回来({记录总数:res.meta.total_count，过滤记录:res.meta.total_count，数据: res.objects});});}).withDataProp('数据');//重要¹$scope.dtColumns = [//你的列定义在这里];});以上解决方案已经过 angular-datatables 0.3.0 + DataTables 1.10.4 的测试.
¹ 这里要注意的重要部分是 angular-datatables 解决方案需要 .withDataProp('data') 才能工作，而纯 jQuery DataTables 解决方案没有 data:'数据' 选项.
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": [...]
}
On the server end, the API's are being handled by django-tastypie
The response from server is:
{
meta: {
limit: 20,
next: null,
offset: 0,
previous: null,
total_count: 2
},
objects: [...]
}
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;
}
}
]
});
Any help will be appreciated.
Thanks in Advance :)
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
});
});
}
});
The solution above has been tested with jQuery DataTables 1.10.4.
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
];
});
The solution above has been tested with angular-datatables 0.3.0 + DataTables 1.10.4.
¹ 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屋！
