테이블에 약 20K (및 계수) 행을 표시하려고합니다. 이를 달성하기 위해 Datatable을 사용하고 있습니다. 이제 서버에서 가져온 많은 데이터를 표시하려면 데이터를 일괄 적으로 보내야합니다.JQuery : 서버 측 페이지 매기기가 작동하지 않음 (Datatable)
스위트에 따라서 나는 을 Datatables에서 제공하기로 결정했습니다.
내가 사용하고 있습니다 :
Datatables 버전 : 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 : 나는 그래서 여러 아약스 통화를 할 필요가 또는 DataTable을 사용하여 부분에서 데이터를로드하는 또 다른 방법이 수행 데이터 테이블에 MySQL의에서 모든 데이터를로드 할.
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
: 은 또한 다음 링크하지만 행운을 언급 한 6,http://refreshmymind.com/datatables-dom-php-ajax-mysql-datasources/
http://phpflow.com/jquery/data-table-table-plug-in-for-jquery/
는 사람이 좀 도와 주시겠습니까? 어떤 도움을 주셔서 감사합니다.
고맙습니다. @ 크리스. 나는 내가 잘못하고있는 것을 얻었다. '시작 '과'드로잉 '을 받아 들여야했다. 'start' 매개 변수는 LIMIT 절의 mysql 쿼리에 전달되어야합니다. 다시 한번 감사드립니다 :) –
고맙습니다. 당신은 저를 많이 도와줍니다. 동일한 문제 (recordsTotal 및 recordsFiltered)에 대해 많은 질문을 보았습니다. datatables doc은 이에 대해 더 구체적이어야합니다. 문서로 이동하면 "recordsFiltered"섹션은 필터링 된 데이터의 총 개수를 반환 값으로 표시합니다. "필터링 후 전체 레코드 (즉, 필터링 한 후의 총 레코드 수 -이 데이터 페이지에 대해 반환되는 레코드 수만이 아닙니다)." – user3821381