我想在表中顯示大約20K(和計數)的行。我正在使用Datatable來實現這一點。現在要顯示從服務器獲取的太多數據,我將不得不批量發送數據。JQuery:Serverside分頁不起作用(數據表)
因此,爲了滿足我的需要,我決定使用由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":"[email protected]",
"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/
任何人都可以幫我嗎?任何幫助表示讚賞。
謝謝@Chris。我得到了我做錯了什麼。必須接受「開始」和「繪製」。 'start'參數應該被傳遞給LIMIT子句中的mysql查詢。再次感謝:) –
謝謝,你幫了我很多。我看到很多關於同樣問題的問題(recordsTotal和recordsFiltered)。 datatables文檔應該對此更具體。當我轉到文檔時,「recordsFiltered」部分將返回值描述爲過濾數據發送到視圖的總數。 「總記錄數,(濾波後得到了應用,即總記錄數 - 返回不僅僅是記錄數本頁面數據)濾波後。」 – user3821381