个人中心
gpt4 book ai didi

html - jQuery : Serverside Pagination Does Not Work (Datatable)

转载 作者：行者123 更新时间：2023-12-02 20:59:56 25 4
gpt4 key购买 nike

我想在表中显示大约 20K(并且还在增加)行。我正在使用 Datatable 来实现这一点。现在要显示从服务器获取的这么多数据，我必须批量发送数据。

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

我正在使用:

数据表版本:1.10.10

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

HTML Code

<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>

Server Side JSON Response (For testing purpose I'm only returning 100 rows)

{
"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":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63061b020e130f06231b1a194d000c0e" rel="noreferrer noopener nofollow">[email protected]</a>",
"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"
}
]
}

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

Table Image

问题 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/

有人可以帮我吗？如有任何帮助，我们将不胜感激。

最佳答案

基本上，您希望每页有 10 条记录，总共 100 条记录(因此 10 页)。然而，当您使用服务器端处理时，DataTables 将在当前页面上显示 JSON 中的每条记录；在服务器端处理模式下，DataTables 只是一个哑显示；所有功能(包括分页)都必须在您的服务器上处理。

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

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

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

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

关于html - jQuery : Serverside Pagination Does Not Work (Datatable)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38874573/

25 4 0
文章推荐： lambda - grunt uglify 不接受 lambda 或箭头函数
文章推荐： Python从子模块导入子模块
文章推荐： github - 当已经拥有自定义 CNAME 时，是否可以在多个存储库上使用 Github 页面？
文章推荐： vb.net - 将图像保存到 Access 数据库为 "Bitmap Image"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com