Ext分页之php中，真分页显示

这是我经过很多天调试的真分页显示Ext组件

显示页面ext.php

 1 <html>
 2  <head>
 3  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4   <title>Getting Started Example</title>
 5   <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
 6   <script src="lib/extjs/adapter/ext/ext-base.js"></script>
 7   <script src="lib/jquery.js"></script>  
 8 <script  src="lib/jquery-plugins.js"></script> 
 9 <script  src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>  
10   <script src="lib/extjs/ext-all-debug.js"></script>
11   <script type="text/javascript">
12 $(document).ready(function(){
13   $("#hide").click(function(){
14   $("p").hide();
15   });
16   $("#show").click(function(){
17   });
18 });
19 
20 </script>
21   <script>
22 function showUrl(value){
23       return "<a href="+value+">"+value+"</a>";
24   } 
25 
26   Ext.onReady(function(){
27        pagesize=2;//定义分页大小
28 store=new Ext.data.JsonStore({
29     url:'json.php',
30     totalProperty:'results',
31     fields:["code_number","protein_name","time"],
32     root:'rows',
33     remoteSort:true
34 });
35 
36 
37 store.load({params:{start:0,limit:2}});
38  var pagetool = pagingTool(store);
39 var colM=new Ext.grid.ColumnModel([
40 {header:"代码号",dataIndex:"code_number",sortable:true,renderer:showUrl},
41 {header:"项目名称",dataIndex:"protein_name",sortable:true},
42 {header:"时间",dataIndex:"time",sortable:true}]);
43 
44 var grid = new Ext.grid.GridPanel({
45 renderTo:"s",
46 title:"查询结果",
47 height:300,
48 width:600,
49 cm:colM,
50 store:store,
51 frame:true,  
52 stripeRows:true,
53 bbar:pagetool,
54 autoExpandColumn:2
55 });
56 }
57 );
58 
59 // 返回分页工具条
60 function pagingTool(store)
61 {
62     var pagetool = new Ext.PagingToolbar (  {
63                 pageSize:2,
64                 store:store,
65                 displayInfo:true,
66                 displayMsg : '显示第{0}条到{1}条记录 ，一共{2}条',
67                 emptyMsg: "没有记录"
68     });
69     return pagetool;
70 }
71 </script>  
72  </head>
73  <body>
74 
75  <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
76 <button id="hide"  type="button">隐藏</button>
77 <button id="show" type="button">显示</button>
78 <div id="id"></div>
79 <div id="s"></div>
80  </body>
81 </html>          

数据库json中json.php

 1  <?php
 2 $conn = mysql_connect("localhost", "root", "");
 3 mysql_select_db("wangbiomass");
 4 mysql_query("set names utf8");
 5 //echo $_REQUEST["start"];
 6 $start = isset($_REQUEST["start"])?$_REQUEST["start"]:0;
 7 $limit = isset($_REQUEST["limit"])?$_REQUEST["limit"]:2;
 8 //echo $start.$limit;
 9 
10     $sql = " SELECT code_number,protein_name,time FROM `protein` LIMIT "."$start".","."$limit";
11     $sql_count = "SELECT code_number,protein_name,time FROM protein";
12 
13 $res = mysql_query($sql_count);
14 $results = mysql_num_rows($res);
15 $result = mysql_query($sql);
16 $arr = array();
17 if(!$result){
18     echo "{success:false}";
19 }else{
20     while($obj = mysql_fetch_object($result)){
21         $arr[] = $obj;
22     }
23 //    echo "{success:\"true\",rows:".json_encode($arr)."}";
24 //echo "{\"rows\":".json_encode($arr)."}";
25 //echo json_encode($arr);
26 echo '({"results":"'.$results.'","rows":'.json_encode($arr).'})';
27 //echo '{results:'.$results.',rows:'.json_encode($arr).'}';
28 }
29 ?>

json.php输出结果为

1 ({"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"}]})

 

posted @ 2013-08-06 15:44  Tim&Blog  阅读(508)  评论(0)  编辑  收藏  举报