Question

我想在表格中显示大约20K（和计数）的行。我正在使用Datatable来实现这一目标。现在要显示从服务器获取的这么多数据，我将不得不批量发送数据。

为了满足我的需要，我决定使用Datatables提供的server side processing。

我正在使用：

数据表版本：1.10.10

下面是我的客户端和服务器端JSON响应格式的要点。

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js">
<title>View Shop</title>
<style type="text/css">
th, td { white-space: nowrap; }
div.dataTables_wrapper {
/* width: 600px; */
margin: 0 auto;
}

th, td {
padding-left: 40px !important;
padding-right: 40px !important;
}
</style>
</head>
<body>
<a id="append" href="#">Refresh</a><hr/>
<table class="stripe row-border order-column" id="example" cellspacing="0">
<thead>
<tr>
<td>Shop ID </td>
<td>Shop Owner Name </td>
<td>Shop Name </td>
<td>Category of Shop </td>
<td>Type of Shop </td>
<td>Contact Number </td>
<td>Shop Email Id </td>
<td>Shop Address </td>
<td>Shop Postal Code </td>
<td>Shop Drug License Number </td>
<td>Shop VAT TIN Number </td>
<td>Shop CST Number </td>
<td>Shop PAN Card Number </td>
<td>Preferred for Inshop </td>
<td>Route Name </td>
<td>City Name </td>
<td>District Name </td>
<td>Headquarter Name </td>
<td>Region Name </td>
<td>State Name </td>
<td>Country Name </td>
<td>Shop Master is Deleted </td>
<td>User Name </td>
<td>Created Date </td>
<td>Created Time </td>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$('#append').click(function(){
$('#example').DataTable({
"processing": true,
"scrollY" : "450px",
"scrollX": true,
"scrollCollapse": true,
"serverSide": true,
"ajax": {
"url": "/ViewShopsPoc?row_limit=0",
"type": "POST"
},
"columns": [
{ mData: 'shop_id' } ,
{ mData: 'shop_owner_name' },
{ mData: 'shop_name' },
{ mData: 'category_of_shop' },
{ mData: 'type_of_shop' },
{ mData: 'contact_number' },
{ mData: 'shop_email_id' },
{ mData: 'shop_address' },
{ mData: 'shop_postal_code' },
{ mData: 'shop_drug_license_no' },
{ mData: 'shop_vat_tin_number' },
{ mData: 'shop_cst_number' },
{ mData: 'shop_pan_card_number' },
{ mData: 'preferred_for_inshop' },
{ mData: 'route_name' },
{ mData: 'city_name' },
{ mData: 'district_name' },
{ mData: 'head_quarter_name' },
{ mData: 'region_name' },
{ mData: 'state_name' },
{ mData: 'country_name' },
{ mData: 'shop_is_deleted' },
{ mData: 'user_employee_name' },
{ mData: 'shop_created_date' },
{ mData: 'shop_created_time' }
]
});
});
});
</script>
</html>

服务器端JSON响应（出于测试目的，我只返回100行）

{
"draw":1,
"recordsFiltered":100,
"recordsTotal":100,
"data":[
{
"shop_created_time":"No Time",
"city_name":"city1",
"shop_created_date":"2016-02-24",
"shop_pan_card_number":"PAN",
"head_quarter_name":"hq1",
"state_name":"state1",
"country_name":"country1",
"shop_cst_number":"CST",
"region_name":"region1",
"route_name":"route1",
"shop_vat_tin_number":"VATTIN",
"shop_is_deleted":"Yes",
"shop_id":"153",
"type_of_shop":"Medical",
"preferred_for_inshop":"Yes",
"shop_email_id":"example@xyz.com",
"user_employee_name":"Test User",
"shop_address":"Address1",
"shop_owner_name":"New Shop Owner",
"shop_drug_license_no":"DRUGLISC",
"shop_name":"New Test 2 Shop - Deleted",
"contact_number":"123456789",
"district_name":"district1",
"shop_postal_code":"123456",
"category_of_shop":"A"
}
]
}

我可以在表格中加载数据，但问题是所有数据都在单个屏幕上加载，而不应该在页面中加载。在表格的屏幕截图下方，其中显示了如何将数据加载到表格中。

问题1：如何在表格中启用分页？

问题2：我想将MySQL中的所有数据加载到数据表中，所以我是否需要执行多个ajax调用，或者是否有其他方法可以使用数据表在部件中加载数据。 / p>

我还提到了以下链接，但没有运气：

https://datatables.net/forums/discussion/32031/pagination-with-server-side-processing#Comment_86438

https://datatables.net/manual/server-side

https://datatables.net/faqs/#Server-side-processing

https://datatables.net/manual/server-side#top

https://datatables.net/examples/server_side/simple.html

http://refreshmymind.com/datatables-dom-php-ajax-mysql-datasources/

http://phpflow.com/jquery/data-table-table-plug-in-for-jquery/

任何人都可以帮助我吗？任何帮助表示赞赏。

Answer 1

问题1：寻呼就在那里。在右侧表格的底部，我看到从第1页到第10页的按钮。问题可能是您的服务器端响应。我看到你回来了100：

"recordsFiltered":100,
"recordsTotal":100,

Datatables认为总共有100条记录。尝试将其设置为实际的记录总数（20000）

问题2：使用服务器端处理时，您需要多次调用数据库。所以例如如果每页显示10条记录并且您在第5页上显示，则您希望从50开始获得10条记录。

Answer 2

基本上，您希望每页有10条记录，总共有100条记录（所以10页）。但是，当您使用服务器端处理时，DataTables将在当前页面上显示JSON中的每条记录;在服务器端处理模式中，DataTables只是一个愚蠢的显示;必须在您的服务器上处理所有功能（包括分页）。

这意味着，不是向DataTables发送100行并期望它进行分页，而是应该发送10行数据（同时仍然留下recordsTotal和recordsFiltered的总数。行（100）），然后每当用户点击[下一页]按钮时，就会向您的服务器发送一个新请求，其中start参数将会增加（有关详细信息，请参阅the documentation for SSP发送到您服务器的JSON）。然后，您将从start点开始再发送10行。

例如，假设您要单击第4页.DataTables会将JSON发送到包含start参数40的服务器。您的服务器端代码从索引开始获取 10行40 ，并将它们返回给DataTables（包含文档中所需的所有其他服务器端参数）。

这意味着您发送到DataTables的第一批数据的recordsTotal和recordsFiltered应为100，但您应仅发送前10行数据。

目前，您正在发送所有行并期望在客户端处理分页，您只需要发送 当前页面所需的内容数据表。

JQuery：Serverside分页不起作用（数据表）

2 个答案: