经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者;
在这里不只是有前端分页页面效果,更有真实html" class="superseo">数据的展示,实现了真正的分页哦!
- 内容导读
1.页面设计
2.jQuery之ajax与JSON数据
3.运行效果
说明:
(1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果
(2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到你哦(:)!
(3)加QQ群:657540173免费下载源码
一.页面设计
<!DOCTYPE html>
<html>
<head>
<!---超客学堂chaoke.ke.qq.com--->
<!--ajax之get请求,无需启动外置服务 -->
<meta charset="utf-8">
<title>前端分页查询</title>
<link rel="stylesheet" type="text/css" href="css/fenye.css" />
</head>
<body>
<!-- 前端分页完美实现 -->
<div class="wrap">
<table id="info" border="2" cellspacing="0" cellpadding="0">
<caption>信息分页查询系统</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</div>
<p class="go">第<span id="now">1</span>页 共<span id="total">5</span>页
<button id="start">首页</button>
<button id="first">上一页</button><button id="next">下一页</button>
<button id="end">尾页</button>跳转到<input id="inp" type="text" />
<button id="go">GO</button>
</p>
</body>
<!---超客学堂chaoke.ke.qq.com加群657540173免费领取更多--->
<script src="js/jqmin.js" type="text/javascript">
</script>
<script src="js/fenye.js" type="text/javascript">
</script>
</html>
二.jQuery之ajax与JSON数据
1.jQuery之ajax请求
// 超客学堂chaoke.ke.qq.com加群657540173免费领取更多
$(function() {
//当前页数
var nowPage = 1;
//总的页数
var totalPage = 4;
//每行限制数
var limitRows = 4;
//总的行数
var totalRows = 0;
//开始的行数
var startRows = 0;
//结束的行数,在数据库中是用limit实现的,不需要此变量
var endRows = 4;
//存所有行的数组
var list = new Array();
//找表格元素及其它各元素
var tab = $('#info');
var now = $('#now');
var total = $('#total');
//(1)初始化数据,运用jQuery的get请求,以下关键步骤做了标记
$.get('json/my.json', function(data, stauts) {
//获取所需数据
//获取最大页数,js除时要取小数,此处要取整
var tg = Math.floor(data.length / limitRows);
if (Math.floor(data.length % limitRows) == 0) {
totalPage = tg;
} else {
totalPage = tg + 1;
}
//存入到数组
list = data;
//初始化显示数据
now.html(nowPage);
total.html(totalPage);
disp(nowPage, list);
});
//(2)按页号显示数据
function disp(n, d) {
//先删除之前的,再创建新的
$("tr").remove(".hqy");
//求每页从1开始,要得到数组开始下标要减一为从0开始
startRows = (n - 1) * limitRows;
endRows = startRows + limitRows;
for (var i = startRows; i < endRows; i++) {
var t = "<tr class='hqy'>" + "<td>" + (101 + i) + "</td>" +
"<td>" + d[i].name + "</td>" +
"<td>" + d[i].age + "</td>" + "</tr>"
tab.append(t);
} //for
//$("tr").remove(".hqy");
} //disp
//(3)下一页
$("#next").click(function() {
++nowPage;
//alert(nowPage)
if (nowPage > totalPage) {
//此处减一是因为数组下标是最大长度减一的
nowPage = totalPage;
}
//先显示页数后展示数
now.html(nowPage);
//要后显示,否则页数切换不正确
disp(nowPage, list);
});
//(4)上一页
$("#first").click(function() {
--nowPage;
if (nowPage < 1) {
//此处为0,传递的是数组的最小标
nowPage = 1;
}
//先显示页数后展示数据
now.html(nowPage);
disp(nowPage, list);
});
//(5)首页
$("#start").click(function() {
//先显示页数后展示数据
nowPage = 1; //注意变量的值要设
now.html(nowPage);
disp(nowPage, list);
});
//(6)尾页
$("#end").click(function() {
//先显示页数后展示数据
nowPage = totalPage; //注意变量的值要设置
now.html(nowPage);
disp(nowPage, list);
});
//(7)跳转到某一页
$("#go").click(function() {
var j = $("#inp").val().trim();
//alert(j=='NaN');
if (j == "" || j == null || j == 'NaN') { //用户可能没输入
nowPage = 1;
} else {//不是空则转换为整型数
nowPage = parseInt(j);
}
//先显示页数后展示数据,注意变量的值要设
if (nowPage > totalPage) {
nowPage = totalPage;
}
$("#inp").val(nowPage);
now.html(nowPage);
disp(nowPage, list);
});
});
////超客学堂chaoke.ke.qq.com加群657540173免费领取更多////
2.JSON数据,保存到my.json文件中
[{"name":"小美","age":19},{"name":"李小刚","age":18},{"name":"小明","age":20},
{"name":"胡江姗","age":17},{"name":"高大山","age":23},{"name":"李楠","age":19},
{"name":"tom","age":24},{"name":"张成功","age":21},{"name":"王强","age":25},
{"name":"刘青云","age":26},{"name":"张太雷","age":24},{"name":"mary","age":19},
{"name":"bean","age":19},{"name":"钱三一","age":25},{"name":"赵小二","age":23},
{"name":"corday","age":20},{"name":"高兴","age":21},{"name":"李太高","age":19}]
三.运行效果
