先将数据库的内容列出在页面
<table class="table"> <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> 做一个loadData方法LloadPageList方法
var pcount = 12;//每一页显示多少条
var page = 1;//当前页
<?php require_once "./dbda/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);
上面是load的处理页面
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>"; //加载列表 //向左找两个 for(var i=page;i>=page-1;i--){ var p = i-1; if(p>0){ str += "<li><a class='plist'>"+p+"</a></li>"; } } //当前页 str += "<li class='disabled'><a>"+page+"</a></li>"; //向右找两个 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>"; } }
实现效果如图
loadpagelist实现分页,然后给分页的class加点击事件
function jiaShiJian(){ $("#prev").click(function(){ if(page>1){ page--; loadData(); loadPageList(); }else{ alert("当前已经是第一页了!"); } }) $("#next").click(function(){ var zye = yeShu(); if(page<=zye){ page++; loadData(); loadPageList(); }else{ alert("当前已经是最后一页了!"); } }) $(".plist").click(function(){ page = parseInt($(this).text());//全局变量 loadData(); loadPageList(); }) }
做一个页数的方法
function yeShu(){ var name = $("#name").val(); var ts = 0; $.ajax({ async:false, url:"yeshu.php", data:{name:name}, type:"POST", dataType:"TEXT", success: function(data){ ts = data; } }) var zye = Math.ceil(ts/pcount); return zye; }