用datagrid分頁顯示數據,後台ThinkPHP代碼怎麼寫?
為什麼點擊datagrid的下一頁,datagrid不能加載刷新第2頁的數據?
我的思路:
①index渲染模板
②supplier_list.html引入的supplier_list.js利用jquery的$(document).ready(function(){$('#list0').datagrid(//此處省略代碼...);});來加載datagrid的數據。
後台代碼如下(index()渲染模板,read()為前台datagrid加載數據):
<?php
/**
class SupplierAction extends Action{
public function index(){
$this->assign('title','供應商列表');
$this->display("Supplier:supplier_list");
}
//獲取供應商列表
public function read(){
$supplier=M('Supplier');
//當前第幾頁
$pagenum=isset($_POST['page'])? intval($_POST['page']):1;
//每頁顯示的記錄數
$pagesize=isset($_POST['rows'])? intval($_POST['rows']):10;
if(isset($_POST['keyword'])){
$map['name']=array('like',array('%'.$_POST['keyword'].'%'));
}else{
$map['_string']='1=1';
}
//import('@.ORG.Util.Page');
//$Page=new Page($total,$pagesize); //實例化分頁類 傳入總記錄數
//進行分頁數據查詢 注意page方法的參數的前面部分是當前的頁數,使用$_GET[p]獲取
//$list2=$supplier->page($pagenum.','.$Page->listRows)->order('ctime')->select();
$list=$supplier->where($map)->limit(($pagenum-1)*$pagesize.','.$pagesize)->order('ctime')->select();
$total=$supplier->where($map)->count(); //查詢滿足條件的總記錄數
$jsonStr='{"total":'.$total.',"rows":'.json_encode($list).'}';
echo $jsonStr;
}
//js代碼
//設置分頁插件
var p=$("#list0").datagrid('getPager');
/*分頁插件*/
$(p).pagination({
pageNumber:1, //顯示的頁數
pageSize:10, //每頁顯示的大小
pageList:[10,20,30,50],
beforePageText:'第', //頁數文本框前顯示的漢字
afterPageText:'頁 共{pages}頁',
displayMsg:'當前顯示{from}-{to}條記錄 共{total}條記錄',
onSelectPage:function(pageNumber,pageSize){
//選擇相應的頁碼時刷新顯示的內容列表
//var queryParams=$("#list0").datagrid('options').queryParams;
//queryParams.PageNumber=pageNumber;
//queryParams.PageSize=pageSize;
$("#list0").datagrid('reload',{page:pageNumber,rows:pageSize});
}
});
點擊datagrid下方的pagination控件的下一頁,datagrid不能刷新顯示第二頁的數據?這是為什麼呢?
$(p).pagination({最後這個的問題。。reload方法無法更改內置的page查詢參數的,這個只能游datagrid控制,你用開發工具看發起的請求就知道了,page一直是1沒變。。
另外給起一個參數名稱newpage,然後修改你的php代碼當前頁控制的鍵名稱
$("#list0").datagrid('reload',{newpage:pageNumber,rows:pageSize});
或者用內置的導航就行了,不需要自己重新寫過pagination,要是想本地化,導入locale/easyui-lang-zh_cn.js語言包就行
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js" charset="utf-8"></script>