DataTables: Обработка Пользовательских Ответов
Я начал работать на AngularJS
и DataTables
и интересно, можно ли настроить ответ DataTables
ждет. Текущее ожидание плагина DataTables выглядит примерно так:
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 5,
"data": [...]
}
на серверной стороне API обрабатываются django-tastypie
ответ от сервера:
{
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;
}
}
]
});
любая помощь будет оценили.
спасибо заранее :)
2 ответов
вы можете передать функцию в 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'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 DataTables 1.10.4.
поскольку этот вопрос помечен угловым, вот решение для тех, кто использует 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
];
});
в решение выше было протестировано с помощью angular-datatables 0.3.0 + DataTables 1.10.4.
1 важная часть, чтобы отметить здесь, что решение angular-datatables требует .withDataProp('data')
для работы, в то время как чистое решение jQuery DataTables не имеет .
этот ответ был очень полезен, но кажется немного устаревшим в контексте текущей (1.10.12 на данный момент) версии datatables, что на самом деле делает жизнь намного проще (или, по крайней мере, более читаемой).
в текущей версии вы можете сделать что-то вроде следующего в своей декларации (имея в виду, что tastypie должен иметь параметры фильтрации и заказа, установленные для полей, которые вы хотите использовать).
теперь вы можете получить доступ к данных, представленных в запрос ajax путем выполнения данных.attr внутри функции.
это предполагает, что вы хотите ограничить поиск одним полем, но его можно легко расширить таким же образом, как консоль.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"]]
});