这是我经过很多天调试的真分页显示Ext组件
显示页面ext.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/jquery-plugins.js"></script>
<script src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
});
}); </script>
<script>
function showUrl(value){
return "<a href="+value+">"+value+"</a>";
} Ext.onReady(function(){
pagesize=2;//定义分页大小
store=new Ext.data.JsonStore({
url:'json.php',
totalProperty:'results',
fields:["code_number","protein_name","time"],
root:'rows',
remoteSort:true
}); store.load({params:{start:0,limit:2}});
var pagetool = pagingTool(store);
var colM=new Ext.grid.ColumnModel([
{header:"代码号",dataIndex:"code_number",sortable:true,renderer:showUrl},
{header:"项目名称",dataIndex:"protein_name",sortable:true},
{header:"时间",dataIndex:"time",sortable:true}]); var grid = new Ext.grid.GridPanel({
renderTo:"s",
title:"查询结果",
height:300,
width:600,
cm:colM,
store:store,
frame:true,
stripeRows:true,
bbar:pagetool,
autoExpandColumn:2
});
}
); // 返回分页工具条
function pagingTool(store)
{
var pagetool = new Ext.PagingToolbar ( {
pageSize:2,
store:store,
displayInfo:true,
displayMsg : '显示第{0}条到{1}条记录 ，一共{2}条',
emptyMsg: "没有记录"
});
return pagetool;
}
</script>
</head>
<body> <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<div id="id"></div>
<div id="s"></div>
</body>
</html>
数据库json中json.php
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("wangbiomass");
mysql_query("set names utf8");
//echo $_REQUEST["start"];
$start = isset($_REQUEST["start"])?$_REQUEST["start"]:0;
$limit = isset($_REQUEST["limit"])?$_REQUEST["limit"]:2;
//echo $start.$limit; $sql = " SELECT code_number,protein_name,time FROM `protein` LIMIT "."$start".","."$limit";
$sql_count = "SELECT code_number,protein_name,time FROM protein"; $res = mysql_query($sql_count);
$results = mysql_num_rows($res);
$result = mysql_query($sql);
$arr = array();
if(!$result){
echo "{success:false}";
}else{
while($obj = mysql_fetch_object($result)){
$arr[] = $obj;
}
// echo "{success:\"true\",rows:".json_encode($arr)."}";
//echo "{\"rows\":".json_encode($arr)."}";
//echo json_encode($arr);
echo '({"results":"'.$results.'","rows":'.json_encode($arr).'})';
//echo '{results:'.$results.',rows:'.json_encode($arr).'}';
}
?>
json.php输出结果为
({"results":"10","rows":[{"code_number":"1","protein_name":"\u91cd\u7ec4\u4eba\u4e73\u94c1\u86cb\u767d","time":"2008"},{"code_number":"2","protein_name":"\u4eba\u4e73\u94c1\u86cb\u767d","time":"2000"}]})
