2016-08-10 89 views
1

我想在表中顯示大約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" 
} 
] 
} 

我能夠加載數據在表中,但的問題是所有的數據加載在單個屏幕而不是它應該已經被加載在頁面中。在表格的屏幕截圖下方,顯示數據如何加載到表格中。

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/

任何人都可以幫我嗎?任何幫助表示讚賞。

回答

1

基本上,你想有10個記錄在每一頁上,總共有100條記錄(所以10頁)。但是,當您使用服務器端處理時,DataTables將在當前頁面上顯示JSON中的每條記錄;在服務器端處理模式DataTables只是一個愚蠢的顯示器;所有功能(包括分頁)必須在您的服務器上處理。

這意味着,不是發送100行到DataTables並期望它到達頁面,應該發生的情況是發送10行數據(同時仍然在總行數(100)上留下recordsTotalrecordsFiltered),並且那麼只要用戶點擊[下頁]按鈕,一個新的請求被髮送到你的服務器,其中start參數將增加(見the documentation for SSP有關JSON的更多詳細信息發送到您的服務器)。然後你會從start點開始發送10多行。

作爲一個例子,讓我們說,你要點擊頁面上的DataTable 4.將JSON發送到您的服務器,其中包括40。你的服務器端代碼start參數得到10行開始於索引40,並返回他們到DataTables(在文檔中必需的所有其他服務器端參數)。

這意味着你發送給DataTables的第一個數據應該有recordsTotalrecordsFiltered爲100,但是你應該只發送第10行的數據爲

目前您所發送的所有行和分頁預期要處理的客戶端,在這裏你只需要發送需要準確什麼的當前頁DataTable的。

+1

謝謝@Chris。我得到了我做錯了什麼。必須接受「開始」和「繪製」。 'start'參數應該被傳遞給LIMIT子句中的mysql查詢。再次感謝:) –

+0

謝謝,你幫了我很多。我看到很多關於同樣問題的問題(recordsTotal和recordsFiltered)。 datatables文檔應該對此更具體。當我轉到文檔時,「recordsFiltered」部分將返回值描述爲過濾數據發送到視圖的總數。 「總記錄數,(濾波後得到了應用,即總記錄數 - 返回不僅僅是記錄數本頁面數據)濾波後。」 – user3821381

2

問題1:尋呼在那裏。在右側表格的底部,我看到按鈕從第1頁到第10頁。問題可能是您的服務器端響應。我看到你正在返回100:

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

Datatables認爲總共有100條記錄。嘗試設置爲實際可記錄的總數(20000)

問2:使用服務器端處理,你需要讓你的數據庫的多個呼叫。所以例如如果10條記錄每頁diplayed,你是第5頁,你會希望得到10個記錄開始於50

+1

感謝您的答覆:)用於測試目的,我只返回100行,這就是我的JSON響應(recordsFiltered&recordsTotal)要回。我無法一次發送所有20K行,因爲我在Google App Engine中運行了我的Java servlet,它允許最多1分鐘的執行時間。這就是爲什麼我需要做多個AJAX調用到servlet –

+0

當然,你仍然可以設置記錄總數達到20K,只有在您迴應100行(過濾,以100套的記錄)。 –

+1

謝謝Brian,我知道它的工作:) –