【发布时间】：2016-08-10 13:16:06
【问题描述】：
我想在表格中显示大约 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 调用还是有其他方法可以使用数据表部分加载数据。
我也参考了以下链接，但没有运气：
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/
谁能帮帮我？任何帮助表示赞赏。
【问题讨论】：
标签： html servlets datatables datatables-1.10