如何在Datatables中使用服务器端get api实现分页
Posted
技术标签:
【中文标题】如何在Datatables中使用服务器端get api实现分页【英文标题】：How to implement pagination with serverside get api in Datatables 【发布时间】：2018-07-29 19:01:42 【问题描述】：我有一个带有服务器端分页的get api，
http://demo.example.com?offset=0&limit=10
我如何在数据表中实现。我在下面尝试但没有成功
$('#example').dataTable(
"ajax":
"url": "data.json",
"dataSrc": function ( json )
for ( var i=0, ien=json.length ; i<ien ; i++ )
json[i][0] = '<a href="/message/'+json[i][0]+'>Next Page</a>';
return json;
);
【问题讨论】：
serverSide": 是的，你添加了这个吗？ 是的，我这样做了，但是如何用下一个或上一个更改偏移值？ 理想情况下，您应该在对象中存储 pagenumber/pagesize，然后在单击上一个/下一个时使用它们 谢谢我明白你的意思，但我怎么能用 Datatables 来实现呢？ 让我看看能不能得到一个例子。 【参考方案1】：终于有时间实现一个服务器端分页示例。
下面是它的完整示例。请注意我们提供给 API 调用的输入。你可以看看这个ajax: function ( data, callback, settings )，它是主键，我们从那里得到正确的页码和页面大小。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Jquery Datatable Example</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table id="example" class="display" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function ()
var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
var table = $('#example').DataTable(
dom: "Bfrtip",
paging: true,
pageLength: 5,
ajax: function ( data, callback, settings )
$.ajax(
url: 'http://localhost:64506/api/values',
// dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data:
RecordsStart: data.start,
PageSize: data.length
,
success: function( data, textStatus, jQxhr )
callback(
// draw: data.draw,
data: data.Data,
recordsTotal: data.TotalRecords,
recordsFiltered: data.RecordsFiltered
);
,
error: function( jqXhr, textStatus, errorThrown )
);
,
serverSide: true,
columns: [
data: "first_name" ,
data: "last_name" ,
data: "position" ,
data: "office" ,
data: "start_date" ,
data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )
]
);
);
</script>
</body>
</html>
在上面的例子中，我们正在集成一个 api，它返回一个以下格式的 JSON。
在下面的格式中，请注意属性“TotalRecords”、“RecordsFiltered”。数据表需要这些来重新计算分页内容并显示适当的页数。
"Data":[
"first_name":"FirstName 5",
"last_name":"LastName 5",
"position":null,
"office":"start date 5",
"start_date":"office 5",
"salary":50
,
"first_name":"FirstName 6",
"last_name":"LastName 6",
"position":null,
"office":"start date 6",
"start_date":"office 6",
"salary":60
,
"first_name":"FirstName 7",
"last_name":"LastName 7",
"position":null,
"office":"start date 7",
"start_date":"office 7",
"salary":70
,
"first_name":"FirstName 8",
"last_name":"LastName 8",
"position":null,
"office":"start date 8",
"start_date":"office 8",
"salary":80
,
"first_name":"FirstName 9",
"last_name":"LastName 9",
"position":null,
"office":"start date 9",
"start_date":"office 9",
"salary":90
],
"TotalRecords":100,
"RecordsFiltered":100
【讨论】：
哈哈，你让我吃惊，我没想到会有答案！但像魅力一样工作 我已经使用了这个答案，除了搜索栏外一切正常。它只是搜索第一页。分页在服务器端，我使用 ajax 获取每个页面的数据。你能帮我解决这个问题吗？ 在 ajax 调用中，传递你的搜索参数并在服务器端过滤它对你有用。以上是关于如何在Datatables中使用服务器端get api实现分页的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 Angular 方式示例在 Angular DataTables 中使用服务器端选项？
如何在没有 Ajax 的 JQuery DataTables 中使用服务器端处理
如何使用 Datatables.AspNet.Mvc5 进行服务器端排序