<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> </head> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>名称</td> </tr> <tbody id="shuju"> </tbody> </table> <!--分页列表信息： 上一页 1 2 3 4 5 下一页 --> <script> //定义两个全局变量 var page = 1; //代表当前页 默认显示第一页 var num = 5; //每页显示几条 //加载数据 //Load(); //加载分页列表信息; //LoadFenYe(); //加载数据的方法 function Load() { $.ajax({ url: "chuli.php", //交给后台页面处理 data: { //向后台传递参数 page: page, num: num }, type: "POST", //用post方式传递 dateType: "JSON", //返回数据类型是json success: function(data) { var str = ""; //定义一个空字符串 需将此放入表格显示 for(var k in data) //遍历json数据 使用foreach { data[k].Code //data[k]取到json数据里的二维的一维的数据 取到json里的所有的代号 str = str + "<tr><td>'+ data[k].Code +' </td><td>'+ data[k].Name +'</td></tr>" } $("#shuju").html(str); } }); } //加载分页列表信息的方法 function LoadFenYe() { //列表里面最多显示 5 条信息 var s = ""; //定义个字符串用来 存储所有分页信息的代码 //加载上一页 s = "<span id='prev'>上一页</span>"; //加载列表 var zts = 0; //总条数 //知道了每页显示5条 再查总共多少条数据 $.ajax({ async: false, //查总条数的这个ajax要做成同步的 异步是同一时间做多件事情，同步是需要一件事做完再做第二件事情。 url: "chazongtiaoshu.php", dataType: "TEXT", //这个查总条数的ajax 不需要传递数据 success: function(data) { zts = data; //返回的data 就是总条数 } }); //求总页数 var zys = Math.ceil(zts / num); //Math.ceil() 该方法取一个大于等于指定数字的最小整数 page = parseInt(page); //这个page可能会变成字符串，为防止出错在用之前把page转成整数 for(var i = page - 2; i < page + 3; i++) //从当前页page-2开始，到当前页page+3结束 (显示页数的时候就显示当前页往左找2个往右找两个) { if(i > 0 && i <= zys) //加个判断条件 页数不能小于0也不能高于总页数 { //因为当前页有个特殊样式并且当前页不能点击所以再加个判断 if(i == page) { s = s + "<span ys='" + i + "' class='dangqian'>'+i+'</span>"; //当前页的是这样的样式 } else { s = s + "<span ys='" + i + "' class='list'>'+i+'</span>"; //非当前页是这样的样式 } } } //加载下一页 s = s + "<span id='next'>下一页</span>"; $("#xinxi").html(s); //给上一页加点击事件 $("#prev").click(function() { page = parseInt(page); //先把当前页转为整数 if(page > 1) //当点击上一页时 当前页需要减去1 但前提是当前页要大于1 { page--; } //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }); //给下一页加点击事件 $("#next").click(function() { page = parseInt(page); if(page < zys) { page++; } //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }); //给列表加点击事件 $("#list").click(function() { page = parseInt($(this).attr("ys")); //把点击的这个当前页转成整数赋值给当前页 //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }) } </script> </body> </html>