jQuery 封装一个分页插件 分页如此简单(附带快捷查询、首尾跳转)
分页组件现在在网页中的应用已经变得十分普遍,关于jquery实现分页组件,网上有很多的框架可以用,不过既然是框架,使用的时候难免有些限制,
所以本着学习新知识的态度,我就踏上了自己写一个分页组件的不归路。网上的框架很少会有对源码的解释,所以我就准备来写这篇blog,一方面让一些跟我一样的小白可以更加了解这个组件的实现,一方面让自己可以从头整理一遍实现这个组件的思路,毕竟一开始写的时候乱糟糟的,如果写着写着能想到怎么优化就更好了。
1:引入相关的js文件和样式文件
<script src="js/jquery-1.9.1.min.js"></script>
<link href="css/index.css" rel="stylesheet" />
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
2:声明一个div或者ul容器来存在分页数据
<ul class="page_box" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->
</ul>
3:加载分页核心jQuery代码文件,将这个代码放在你html页面即可
<script>
//总页数
var pageNum = 1;
//当前页
var currentPage = 1;
//每页多少条
var size = 10;
//方法名
var fangfa = "";
function rushPage(totalCount,ff){
pageNum = totalCount;
pageNum = totalCount <= size ? 1 : totalCount/size;
pageNum = parseInt(pageNum);
if(totalCount >= size && totalCount%size != 0){
pageNum += 1;
}
fangfa = ff;
var topPage = "";
if(pageNum >= 1 && pageNum <=4){
for(j =1 ;j<=pageNum ;j++){
if(j == currentPage){
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
}else{
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
}
}
}else if(pageNum >4){
currentPage = parseInt(currentPage);
var pre = currentPage-1;
var next = currentPage+1;
if(currentPage == 1){
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(1)'>1</a><a class='' style='cursor:pointer;' onClick='selectPage(2)'>2</a><a class='' style='cursor:pointer;' onClick='selectPage(3)'>3</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if(currentPage == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-2)+")'>"+(pageNum-2)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-1)+")'>"+(pageNum-1)+"</a><a class='active' style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if((currentPage+1) == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if((currentPage+2) == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else{
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+2)+")'>"+(currentPage+2)+"</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}
}
if(totalCount >= 1){
$(".page_box").html("<li><a onclick='fristPage();' style='cursor:pointer;'>首页</a><span><a onclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a onclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' onclick='lastPage();'>尾页</a><span>跳转到 第<input type='text' id='jumpPageNum' />页 </span><a class='qd_btn' onclick='jumpPage();'>确定</a></li>");
}else{
$(".page_box").html("");
}
}
function upNextPage(){
currentPage = currentPage - 1;
if(currentPage <= 0){
currentPage = 1;
}
fangfa();
}
function downNextPage(){
currentPage = currentPage + 1;
if(currentPage > pageNum){
currentPage = pageNum;
}
fangfa();
}
function fristPage(){
currentPage = 1;
fangfa();
}
function lastPage(){
currentPage = pageNum;
fangfa();
}
function selectPage(a){
currentPage = a;
fangfa();
}
function jumpPage(){
var jumpPageNum = $("#jumpPageNum").val();
if(jumpPageNum==""){
jumpPageNum=1;
};
if(jumpPageNum>pageNum){
jumpPageNum=pageNum;
}
currentPage = jumpPageNum;
fangfa();
}
$(document).on("keyup","#jumpPageNum",function(){
//$("#jumpPageNum").live("keyup",function(){
var rg=$(this).val();
if(rg != ""){
rg = checkInputIsNumber(rg);
if(rg != ""){
rg = parseInt(rg);
$(this).val(rg);
}else{
$(this).val(rg);
}
}
if(rg > pageNum){
$(this).val(pageNum);
}
currentPage = $("#jumpPageNum").val();
});
/** 验证只能输入整数 数字* */
function checkInputIsNumber (_this) {
var str = $.trim(_this).split('');
var valValue = "";
for (var i = 0; i < str.length; i++) {
if (!isNaN(str[i]) && $.trim(str[i]).length > 0) {
if (i == 0 && str[i] == 0) {
} else {
valValue += str[i];
}
}
}
return valValue;
}
</script>
4:如何调用代码方法生成分页
<script>
var currentPage = 1; //默认初始分页 请求数据时候会使用到这个变量传入到你的后台查询第几页的数据
$(document).ready(function(){
get_Date();
})
function get_Date(){
var total = 50; //这个就是你的数据总数
alert(currentPage);
if(total >10){
rushPage(50, get_Date); //get_Date 是你请求数据的方法
}else{
rushPage(0, get_Date);
}
}
</script>
下面是效果图
总结特点如下:
A. 方便在 JavaScript 中对后端分页数据进行展示
B. 自动生成分页组件,包括首页、页码、末页、页码切换、跳页、输入页码快捷跳转
C. 可根据 "class" 或 "id" 作为指定容器,通过 "class" 可以实现多个分页组件同时生成
最后附上一个完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页插件</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery-1.9.1.min.js"></script>
<link href="css/index.css" rel="stylesheet" />
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<script>
//总页数
var pageNum = 1;
//当前页
var currentPage = 1;
//每页多少条
var size = 10;
//方法名
var fangfa = "";
function rushPage(totalCount,ff){
pageNum = totalCount;
pageNum = totalCount <= size ? 1 : totalCount/size;
pageNum = parseInt(pageNum);
if(totalCount >= size && totalCount%size != 0){
pageNum += 1;
}
fangfa = ff;
var topPage = "";
if(pageNum >= 1 && pageNum <=4){
for(j =1 ;j<=pageNum ;j++){
if(j == currentPage){
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
}else{
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
}
}
}else if(pageNum >4){
currentPage = parseInt(currentPage);
var pre = currentPage-1;
var next = currentPage+1;
if(currentPage == 1){
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(1)'>1</a><a class='' style='cursor:pointer;' onClick='selectPage(2)'>2</a><a class='' style='cursor:pointer;' onClick='selectPage(3)'>3</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if(currentPage == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-2)+")'>"+(pageNum-2)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-1)+")'>"+(pageNum-1)+"</a><a class='active' style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if((currentPage+1) == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else if((currentPage+2) == pageNum){
topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}else{
topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+2)+")'>"+(currentPage+2)+"</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
}
}
if(totalCount >= 1){
$(".page_box").html("<li><a onclick='fristPage();' style='cursor:pointer;'>首页</a><span><a onclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a onclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' onclick='lastPage();'>尾页</a><span>跳转到 第<input type='text' id='jumpPageNum' />页 </span><a class='qd_btn' onclick='jumpPage();'>确定</a></li>");
}else{
$(".page_box").html("");
}
}
function upNextPage(){
currentPage = currentPage - 1;
if(currentPage <= 0){
currentPage = 1;
}
fangfa();
}
function downNextPage(){
currentPage = currentPage + 1;
if(currentPage > pageNum){
currentPage = pageNum;
}
fangfa();
}
function fristPage(){
currentPage = 1;
fangfa();
}
function lastPage(){
currentPage = pageNum;
fangfa();
}
function selectPage(a){
currentPage = a;
fangfa();
}
function jumpPage(){
var jumpPageNum = $("#jumpPageNum").val();
if(jumpPageNum==""){
jumpPageNum=1;
};
if(jumpPageNum>pageNum){
jumpPageNum=pageNum;
}
currentPage = jumpPageNum;
fangfa();
}
$(document).on("keyup","#jumpPageNum",function(){
//$("#jumpPageNum").live("keyup",function(){
var rg=$(this).val();
if(rg != ""){
rg = checkInputIsNumber(rg);
if(rg != ""){
rg = parseInt(rg);
$(this).val(rg);
}else{
$(this).val(rg);
}
}
if(rg > pageNum){
$(this).val(pageNum);
}
currentPage = $("#jumpPageNum").val();
});
/** 验证只能输入整数 数字* */
function checkInputIsNumber (_this) {
var str = $.trim(_this).split('');
var valValue = "";
for (var i = 0; i < str.length; i++) {
if (!isNaN(str[i]) && $.trim(str[i]).length > 0) {
if (i == 0 && str[i] == 0) {
} else {
valValue += str[i];
}
}
}
return valValue;
}
</script>
<script>
var currentPage = 1; //默认初始分页 请求数据时候会使用到这个变量传入到你的后台查询第几页的数据
$(document).ready(function(){
get_Date();
})
function get_Date(){
var total = 50; //这个就是你的数据总数
alert(currentPage);
if(total >10){
rushPage(50, get_Date); //get_Date 是你请求数据的方法
}else{
rushPage(0, get_Date);
}
}
</script>
<ul class="page_box" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->
</ul>
<body>
</body>
</html>