<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <br /> <div> 请输入名称：<input type="text" id="name" /> <input type="button" value="查询" id="btn" /> </div> <br /> <table class="table table-striped"> <caption>中国省市区信息</caption> <thead> <tr> <th>地区代号</th> <th>地区名称</th> <th>父级代号</th> </tr> </thead> <tbody id="nr"> </tbody> </table> <div style="30%; margin:0px auto"> <ul class="pagination" id="pagelist"> </ul> </div> </body> <script type="text/javascript"> var pcount = 12; //每页显示多少条 var page = 1; //当前页 //加载数据 loadData(); //加载分页列表 loadPageList(); //查询 $("#btn").click(function(){ page = 1; //加载数据 loadData(); //加载分页列表 loadPageList(); }) //加载数据的函数 function loadData(){ var name = $("#name").val(); $.ajax({ url:"load.php", data:{page:page,pcount:pcount,name:name}, type:"POST", dataType:"JSON", success: function(data){ var str = ""; /*for(var i=0;i<data.length;i++){ str += "<tr><td>"+data[i].AreaCode+"</td><td>"+data[i].AreaName+"</td><td>"+data[i].ParentAreaCode+"</td></tr>"; }*/ for(var k in data){ str += "<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>"; } $("#nr").html(str); } }); } //加载分页列表 function loadPageList(){ var str = ""; //加载上一页 str += "<li><a id='prev'>«</a></li>"; //加载列表 //往左找2个 10 for(var i=page-2;i<page;i++){ var p = i; if(p>0){ str += "<li><a class='plist'>"+p+"</a></li>"; } } //当前页 str += "<li class='active'><a>"+page+"</a></li>"; //往右找2个 for(var i=page;i<=page+1;i++){ var p = i+1; var zys = yeShu(); if(p<=zys){ str += "<li><a class='plist'>"+p+"</a></li>"; } } //加载下一页 str += "<li><a id='next'>»</a></li>"; $("#pagelist").html(str); //给分页列表加事件 jiaShiJian(); } //获取总页数的方法 function yeShu(){ var ts = 0; //总条数 var name = $("#name").val(); $.ajax({ async:false, data:{name:name}, type:"POST", url:"shuliang.php", dataType:"TEXT", success: function(data){ ts = data; } }); var zys = Math.ceil(ts/pcount); return zys; } //给分页列表加事件的方法 function jiaShiJian(){ //给上一页加事件 $("#prev").click(function(){ //当前页减一 if(page>1){ page--; //重新加载数据 loadData(); //重新加载分页列表 loadPageList(); }else{ alert("当前已经是第一页了！"); } }) //给下一页加事件 $("#next").click(function(){ //当前页加一 var zsy = yeShu(); if(page<zsy){ page++; //重新加载数据 loadData(); //重新加载分页列表 loadPageList(); }else{ alert("当前已经是最后一页了！"); } }) //给中间的列表加事件 $(".plist").click(function(){ //换当前页 page = parseInt($(this).text()); //重新加载数据 loadData(); //重新加载分页列表 loadPageList(); }) } </script> </html>
实现分页的处理页面为：
<?php require_once "DBDA.class.php"; $db = new DBDA(); $name = $_POST["name"]; $tj = " 1=1 "; if(!empty($name)){ $tj = " areaname like '%{$name}%' "; } $sql = "select count(*) from chinastates where {$tj}"; echo $db->strquery($sql);
查找显示数据并实现查询功能的处理页面为：
<?php require_once "DBDA.class.php"; $db = new DBDA(); $page = $_POST["page"]; $pcount = $_POST["pcount"]; $name = $_POST["name"]; $tj = " 1=1 "; if(!empty($name)){ $tj = " areaname like '%{$name}%' "; } $tg = ($page-1)*$pcount; $sql = "select * from chinastates where {$tj} limit {$tg},{$pcount}"; echo $db->jsonquery($sql);