我正在构建一个包含数据表的网络应用程序。我从api获取数据，它有服务器端分页。我想对我的数据表实施分页，并需要你的帮助：）
这是我的数据表的js代码：
$http({
url: "http://localhost/standarts-and-partners-api/documents",
method: 'GET',
headers: {
'Accept': 'application/json'
}
}).then(function (response) {
$scope.documents = response.data.data;
$timeout(function () {
// Init full DataTable, for more examples you can check out https://www.datatables.net/
var initDataTableFull = function () {
jQuery('.js-dataTable-full').dataTable();
};
// DataTables Bootstrap integration
var bsDataTables = function () {
var DataTable = jQuery.fn.dataTable;
// Set the defaults for DataTables init
jQuery.extend(true, DataTable.defaults, {
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
renderer: 'bootstrap',
oLanguage: {
sLengthMenu: "_MENU_",
sInfo: "Showing <strong>_START_</strong>-<strong>_END_</strong> of <strong>_TOTAL_</strong>",
oPaginate: {
sPrevious: '<i class="fa fa-angle-left"></i>',
sNext: '<i class="fa fa-angle-right"></i>'
}
}
});
// Default class modification
jQuery.extend(DataTable.ext.classes, {
sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
sFilterInput: "form-control",
sLengthSelect: "form-control"
});
// Bootstrap paging button renderer
DataTable.ext.renderer.pageButton.bootstrap = function (settings, host, idx, buttons, page, pages) {
var api = new DataTable.Api(settings);
var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate;
var btnDisplay, btnClass;
var attach = function (container, buttons) {
var i, ien, node, button;
var clickHandler = function (e) {
e.preventDefault();
if (!jQuery(e.currentTarget).hasClass('disabled')) {
api.page(e.data.action).draw(false);
}
};
for (i = 0, ien = buttons.length; i < ien; i++) {
button = buttons[i];
if (jQuery.isArray(button)) {
attach(container, button);
}
else {
btnDisplay = '';
btnClass = '';
switch (button) {
case 'ellipsis':
btnDisplay = '…';
btnClass = 'disabled';
break;
case 'first':
btnDisplay = lang.sFirst;
btnClass = button + (page > 0 ? '' : ' disabled');
break;
case 'previous':
btnDisplay = lang.sPrevious;
btnClass = button + (page > 0 ? '' : ' disabled');
break;
case 'next':
btnDisplay = lang.sNext;
btnClass = button + (page < pages - 1 ? '' : ' disabled');
break;
case 'last':
btnDisplay = lang.sLast;
btnClass = button + (page < pages - 1 ? '' : ' disabled');
break;
default:
btnDisplay = button + 1;
btnClass = page === button ?
'active' : '';
break;
}
if (btnDisplay) {
node = jQuery('<li>', {
'class': classes.sPageButton + ' ' + btnClass,
'aria-controls': settings.sTableId,
'tabindex': settings.iTabIndex,
'id': idx === 0 && typeof button === 'string' ?
settings.sTableId + '_' + button :
null
})
.append(jQuery('<a>', {
'href': '#'
})
.html(btnDisplay)
)
.appendTo(container);
settings.oApi._fnBindAction(
node, {action: button}, clickHandler
);
}
}
}
};
attach(
jQuery(host).empty().html('<ul class="pagination"/>').children('ul'),
buttons
);
};
// TableTools Bootstrap compatibility - Required TableTools 2.1+
if (DataTable.TableTools) {
// Set the classes that TableTools uses to something suitable for Bootstrap
jQuery.extend(true, DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn btn-default",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info"
},
"select": {
"row": "active"
}
});
// Have the collection use a bootstrap compatible drop down
jQuery.extend(true, DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
});
}
};
// Init Datatables
bsDataTables();
initDataTableFull();
});
这是我从api获得的json数据：
{
"success": true,
"data": [
{
"id": 1,
"description": "Bu ekledigimiz ilk belge, hayirli olsun.",
"due_date": "16.03.2017",
"company_id": 2,
"department_id": 2,
"reason_id": 1,
"group_order_id": 1,
"status": 1,
"created_by": 4,
"created": "06.04.2017",
"modified": "20.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [
{
"id": 1,
"document_id": 1,
"folder_path": "/deneme/2/",
"file_name": "5.png",
"created": "08.04.2017",
"deleted": null
},
{
"id": 3,
"document_id": 1,
"folder_path": "/deneme/2/",
"file_name": "8.png",
"created": "08.04.2017",
"deleted": null
}
],
"company": {
"id": 2,
"name": "Media Markt",
"code": "MMM",
"contact_user_id": 1,
"manager_id": 4,
"created_by": 2,
"created": "16.03.2017",
"modified": "19.04.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 4,
"description": "Technology expenditure",
"due_date": "16.03.2017",
"company_id": 1,
"department_id": 2,
"reason_id": 3,
"group_order_id": 3,
"status": 1,
"created_by": 4,
"created": "08.04.2017",
"modified": "20.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [],
"company": {
"id": 1,
"name": "Facebook",
"code": "FB",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 3,
"created": "16.03.2017",
"modified": "27.03.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 5,
"description": "Two computer has bought",
"due_date": "16.03.2017",
"company_id": 2,
"department_id": 4,
"reason_id": 2,
"group_order_id": 4,
"status": 1,
"created_by": 4,
"created": "08.04.2017",
"modified": "21.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [
{
"id": 5,
"document_id": 5,
"folder_path": "/deneme/2/",
"file_name": "6.png",
"created": "11.04.2017",
"deleted": null
}
],
"company": {
"id": 2,
"name": "Media Markt",
"code": "MMM",
"contact_user_id": 1,
"manager_id": 4,
"created_by": 2,
"created": "16.03.2017",
"modified": "19.04.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 6,
"description": "Launch",
"due_date": "16.03.2017",
"company_id": 1,
"department_id": 4,
"reason_id": 4,
"group_order_id": 5,
"status": 0,
"created_by": 4,
"created": "11.04.2017",
"modified": "11.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [
{
"id": 6,
"document_id": 6,
"folder_path": "/deneme/2/",
"file_name": "8.png",
"created": "11.04.2017",
"deleted": null
}
],
"company": {
"id": 1,
"name": "Facebook",
"code": "FB",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 3,
"created": "16.03.2017",
"modified": "27.03.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 7,
"description": "Mert Köksal",
"due_date": "16.03.2017",
"company_id": 3,
"department_id": 10,
"reason_id": 2,
"group_order_id": 6,
"status": 0,
"created_by": 4,
"created": "17.04.2017",
"modified": "17.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [],
"company": {
"id": 3,
"name": "Google",
"code": "GGL",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 4,
"created": "26.03.2017",
"modified": null,
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 8,
"description": "Blabla",
"due_date": "16.03.2017",
"company_id": 1,
"department_id": 10,
"reason_id": 1,
"group_order_id": 7,
"status": 1,
"created_by": 4,
"created": "17.04.2017",
"modified": "20.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [
{
"id": 37,
"document_id": 8,
"folder_path": "/deneme1",
"file_name": "1.png",
"created": "17.04.2017",
"deleted": null
},
{
"id": 38,
"document_id": 8,
"folder_path": "/deneme25",
"file_name": "2.png",
"created": "17.04.2017",
"deleted": null
},
{
"id": 39,
"document_id": 8,
"folder_path": "/deneme13",
"file_name": "1.png",
"created": "17.04.2017",
"deleted": null
},
{
"id": 40,
"document_id": 8,
"folder_path": "/deneme2",
"file_name": "2.png",
"created": "17.04.2017",
"deleted": null
},
{
"id": 47,
"document_id": 8,
"folder_path": "/deneme/images/8",
"file_name": "10.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 48,
"document_id": 8,
"folder_path": "/deneme/images/8",
"file_name": "11.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 49,
"document_id": 8,
"folder_path": "/deneme/images/8",
"file_name": "12.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 50,
"document_id": 8,
"folder_path": "/deneme/images/8",
"file_name": "13.png",
"created": "19.04.2017",
"deleted": null
}
],
"company": {
"id": 1,
"name": "Facebook",
"code": "FB",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 3,
"created": "16.03.2017",
"modified": "27.03.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 10,
"description": "Sirket icin yeni masalar alinmistir",
"due_date": "27.04.2017",
"company_id": 2,
"department_id": 3,
"reason_id": 5,
"group_order_id": null,
"status": 1,
"created_by": 3,
"created": "19.04.2017",
"modified": "20.04.2017",
"approved_by": "Kivanc Bey",
"deleted": null,
"document_images": [
{
"id": 41,
"document_id": 10,
"folder_path": "/home/images/",
"file_name": "4.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 42,
"document_id": 10,
"folder_path": "/home/images/",
"file_name": "7.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 43,
"document_id": 10,
"folder_path": "/home/images/",
"file_name": "9.png",
"created": "19.04.2017",
"deleted": null
},
{
"id": 52,
"document_id": 10,
"folder_path": null,
"file_name": null,
"created": "20.04.2017",
"deleted": null
},
{
"id": 53,
"document_id": 10,
"folder_path": null,
"file_name": null,
"created": "20.04.2017",
"deleted": null
},
{
"id": 54,
"document_id": 10,
"folder_path": null,
"file_name": null,
"created": "20.04.2017",
"deleted": null
},
{
"id": 55,
"document_id": 10,
"folder_path": null,
"file_name": null,
"created": "20.04.2017",
"deleted": null
}
],
"company": {
"id": 2,
"name": "Media Markt",
"code": "MMM",
"contact_user_id": 1,
"manager_id": 4,
"created_by": 2,
"created": "16.03.2017",
"modified": "19.04.2017",
"deleted": null
},
"user": {
"id": 3,
"role_id": 10,
"cell_phone": null,
"first_name": "Some",
"last_name": "One",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 11,
"description": "Sirket icin yeni masalar alinmistir",
"due_date": "27.04.2017",
"company_id": 1,
"department_id": 2,
"reason_id": 4,
"group_order_id": null,
"status": 0,
"created_by": 4,
"created": "20.04.2017",
"modified": "20.04.2017",
"approved_by": "Kerem Kaya",
"deleted": null,
"document_images": [],
"company": {
"id": 1,
"name": "Facebook",
"code": "FB",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 3,
"created": "16.03.2017",
"modified": "27.03.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 12,
"description": "Sirket icin yeni masalar alinmistir",
"due_date": "22.04.2017",
"company_id": 1,
"department_id": 4,
"reason_id": 4,
"group_order_id": null,
"status": 1,
"created_by": 4,
"created": "20.04.2017",
"modified": "20.04.2017",
"approved_by": "Kerem Kaya",
"deleted": null,
"document_images": [],
"company": {
"id": 1,
"name": "Facebook",
"code": "FB",
"contact_user_id": 2,
"manager_id": 3,
"created_by": 3,
"created": "16.03.2017",
"modified": "27.03.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
},
{
"id": 13,
"description": "Sirket icin yeni masalar alinmistir",
"due_date": "19.04.2017",
"company_id": 2,
"department_id": 10,
"reason_id": 4,
"group_order_id": null,
"status": 1,
"created_by": 4,
"created": "20.04.2017",
"modified": "20.04.2017",
"approved_by": "Kerem Kaya",
"deleted": null,
"document_images": [],
"company": {
"id": 2,
"name": "Media Markt",
"code": "MMM",
"contact_user_id": 1,
"manager_id": 4,
"created_by": 2,
"created": "16.03.2017",
"modified": "19.04.2017",
"deleted": null
},
"user": {
"id": 4,
"role_id": 11,
"cell_phone": null,
"first_name": "Burak",
"last_name": "Ozturk",
"created": "16.03.2017",
"modified": null,
"token_expire": null,
"deleted": null
}
}
],
"pagination": {
"page_count": 2,
"current_page": 1,
"has_next_page": true,
"has_prev_page": false,
"count": 18,
"limit": null
}
}
任何帮助都会让我非常开心。 感谢。