<!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>
