jq的分页插件（pagination.min.js）选择⼀页显⽰多少条数据
⾸先引⼊jq，再引pagination.min.js；pagination.css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="pagination.css"/>
</head>
<body>
<div id="pagination"></div>
</body>
</html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="pagination.min.js"></script>
<script>
$("#pagination").whjPaging({
totalSize: 90,
totalPage: 18,
callBack: function(currPage, pageSize) {
console.log('currPage:' + currPage + '    pageSize:' + pageSize);
}
});
</script>
pagination.min.js
/**
* @version: v1.7
* @author: xgc-whj
* @date: 2018-05-25 21:40:00
* @license: MIT license release
* @jq22 address: www.jq22/jquery-info17548
* @GitHub: github/w0624/jquery-pagination
* @description: jQuery分页插件，可⾃定义样式，默认有五套样式，可⾃定义插件选项，简单⽅便，兼容IE8
*/
(function(){$.fn.extend({whjPaging:function(b,r){var g=$(this);if(b==="getPage"){return{(0).alSize,(0).pageText.staticCurrPage,(0).pageText.staticPageSize,(0).pageText.static pagination.css
@charset "UTF-8";
/**
* @version: v1.7
* @author: xgc-whj
* @date: 2018-05-25 21:40:00
* @license: MIT license release
* @jq22 address: www.jq22/jquery-info17548
* @GitHub: github/w0624/jquery-pagination
* @description: jQuery分页插件，可⾃定义样式，默认有五套样式，可⾃定义插件选项，简单⽅便，兼容IE8
*/
/*ccs-1*/
.whj_jqueryPaginationCss-1 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-1 div {
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-1 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-1 .whj_bgc {
background-color: #fff;
color: #698ca9;分页查询插件
}
.whj_jqueryPaginationCss-1 .whj_border {
border: 1px solid #5b9fd6;
}
.whj_jqueryPaginationCss-1 .whj_color {
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hover:hover {
background-color: #d4f1ff;
color: #698ca9;
cursor: pointer;
}
.whj_jqueryPaginationCss-1 .whj_checked {
background-color: #d4f1ff;
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.
whj_jqueryPaginationCss-1 select {
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-1 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-1 div, .whj_jqueryPaginationCss-1 input, .whj_jqueryPaginationCss-1 select {    margin: 2px;
}
/*只有设置显⽰总页数时，该样式才⽣效*/
.whj_jqueryPaginationCss-1 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-2*/
.whj_jqueryPaginationCss-2 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-2 div {
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-2 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-2 .whj_bgc {
background-color: #5194ca;
color: #fff;
}
.whj_jqueryPaginationCss-2 .whj_border {
border: 1px solid #5194ca;
}
.
whj_jqueryPaginationCss-2 .whj_color {
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hover:hover {
background-color: #d4f1ff;
color: #5194ca;
cursor: pointer;
}
.whj_jqueryPaginationCss-2 .whj_checked {
background-color: #d4f1ff;
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hoverDisable {
opacity: 0.7;
filter: alpha(opacity=70);
}
.whj_jqueryPaginationCss-2 select {
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.
whj_jqueryPaginationCss-2 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-2 div, .whj_jqueryPaginationCss-2 input, .whj_jqueryPaginationCss-2 select {    margin: 2px;
}
/*只有设置显⽰总页数时，该样式才⽣效*/
.whj_jqueryPaginationCss-2 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-3*/
.whj_jqueryPaginationCss-3 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.
whj_jqueryPaginationCss-3 div {
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-3 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-3 .whj_bgc {
background-color: #7a7b7b;
color: #fff;
}
.whj_jqueryPaginationCss-3 .whj_border {
border: 1px solid #929292;
}
.whj_jqueryPaginationCss-3 .whj_color {
color: #929292;
}
.whj_jqueryPaginationCss-3 .whj_hover:hover {
background-color: #e0dddd;
color: #7a7b7b;
cursor: pointer;
}
.whj_jqueryPaginationCss-3 .whj_checked {
background-color: #e0dddd;
color: #7a7b7b;
}
.whj_jqueryPaginationCss-3 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-3 select {
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-3 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-3 div, .whj_jqueryPaginationCss-3 input, .whj_jqueryPaginationCss-3 select {    margin: 2px;
}
/*只有设置显⽰总页数时，该样式才⽣效*/
.whj_jqueryPaginationCss-3 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-4*/
.whj_jqueryPaginationCss-4 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-4 div {
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.
whj_jqueryPaginationCss-4 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-4 .whj_bgc {
background-color: #f5f5f5;
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_border {
border: 1px solid #907272;
}
.whj_jqueryPaginationCss-4 .whj_color {
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_hover:hover {
background-color: #afacac;
color: #fff;
cursor: pointer;
}
.whj_jqueryPaginationCss-4 .whj_checked {
background-color: #afacac;
color: #fff;
}
.
whj_jqueryPaginationCss-4 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-4 select {
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-4 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-4 div, .whj_jqueryPaginationCss-4 input, .whj_jqueryPaginationCss-4 select {    margin: 2px;
}
/*只有设置显⽰总页数时，该样式才⽣效*/
.whj_jqueryPaginationCss-4 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-5*/
.whj_jqueryPaginationCss-5 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-5 div {
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-5 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-5 .whj_bgc {
background-color: #199eaf;
color: #fff;
}
.whj_jqueryPaginationCss-5 .whj_border {
border: 1px solid #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_color {
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hover:hover {
background-color: #d4f1ff;
color: #199eaf;
cursor: pointer;
}
.whj_jqueryPaginationCss-5 .whj_checked {
background-color: #d4f1ff;
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-5 select {
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-5 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-5 div, .whj_jqueryPaginationCss-5 input, .whj_jqueryPaginationCss-5 select {
margin: 2px;
}
/*只有设置显⽰总页数时，该样式才⽣效*/
.whj_jqueryPaginationCss-5 .whj_totalSizeSingle {
margin-left: -8px;
}
使⽤ajax分页例⼦，默认每页5条(建议初始化分页插件参数isResetPage设为true)：
function loadData(currPage, pageSize) {
$.ajax({
//其它参数选项请⾃填
success: function(res) {
//处理数据
//设置分页插件显⽰
$("#pagination").whjPaging("setPage", {currPage: res.currPage, totalPage: alPage, totalSize: alSize});
}
});
}
$("#pagination").whjPaging({
//设为true时，ajax⾥的success函数必须调⽤setPage⽅法，否则分页插件显⽰保持不变
isResetPage: true,
callBack: function(currPage, pageSize) {
loadData(currPage, pageSize);
}
});
loadData(1, 5);
完整的案例：（仅供参考不能运⾏）
<div class="seekRight f_left"><input type="submit" value="搜索" onclick="searchArchivesInfo(1,20)"></div>
//onclick="searchArchivesInfo(1,20)//html页⾯定义⼀个点击事件传递固定参数1：表⽰从第⼀也开始；20：表⽰⼀页显⽰20条数据。该参数随⾃⼰的项⽬⽽定function searchArchivesInfo(currPage,pageSize){
var beginNum=$("#beginArchivesNum").val();
var endNum=$("#endArchivesNum").val();
//var cen="J063-BDC02-2016-000185"
var le=beginNum.length;
var enle=endNum.length;
var dates=beginNum.substring(11,15);//2016
var datee=endNum.substring(11,15);//2016
var dnbs=beginNum.substring(16,22);//000185
var dndee=endNum.substring(16,22);//000185
var stnu=beginNum.substring(11,22).replace("-","");//2016000185
var ennu=endNum.substring(11,22).replace("-","");
var subtract=ennu-stnu;
var qsfor=beginNum.substring(0,4)//J063
var jsfor=endNum.substring(0,4)//J063
var qsfiv=beginNum.substring(5,10)//BDC02
var jsfiv=endNum.substring(5,10)//BDC02
var zheng =/^[0-9A-Z]+$/;
if(!st(qsfor) && !st(jsfor) && !st(qsfiv) && !st(jsfiv) && qsfor.length==4 && jsfor.length==4 && qsfiv.length==5 && jsfiv.length==5){
alert("输⼊正确的档案号！");
return;
}
$("#allcheck").prop('checked',false);
$(".dacheck").prop('checked',false);
$("#contentTable").html("");
if(le==22 && enle==22 && subtract>=0 && dates.length==4 && datee.length==4 && dnbs.length==6 && dndee.length==6){
$.ajax({
url:"/archives/databusiness/yxgjcx.do",
type:"post",
dataType:"json",
data:{"beginNum":beginNum,"endNum":endNum,"page":currPage,"num":pageSize},
success:function(result){
console.log(result);
var data=result.data;
if(data!=""){
var nums=result.data[0].TOT;
var alen=Number(nums);
for(var i=0;i<result.data.length;i++){
var index=pageSize*(currPage-1)+i+1;
var arch=data[i].ARCHIVESNUM;
var id=data[i].ID;
$("#contentTable").append("<tr class='te'>" +
"<td><input type='checkbox' name='items' class='dacheck' value='"+data[i].ID+","+data[i].ARCHIVESNUM+"' onclick='clickchuange(this,\""+id+","+arch+"\")'></td>" + /*"<td class='agree '><p class='igees' changeId='"+data[i].ID+"' changeDate='"+data[i].ARCHIVESNUM+"' class='red'  onclick='clickchuange()'></p></td>"+*/
"<td>"+index+"</td>"+
"<td>"+data[i].CLANNO+"</td>"+
"<td>"+data[i].DIRECTORYNO+"</td>"+
"<td>"+data[i].YEAR+"</td>"+
"<td>"+data[i].CODE+"</td>"+
"<td>"+data[i].NAME+"</td>"+
"<td>"+data[i].ADDRESS+"</td>"+
"<td></td>"+
"<td></td>"+
"<td>"+data[i].LANDNO+"</td>"+
"<td>"+data[i].USEAREA+"</td>"+
"<td>"+data[i].TIME+"</td>"+
"</tr>");
}
}else{
$("#contentTable").append("<tr><td colspan='13'>⽆数据！</td></tr>");
}
var pages =  il(alen/pageSize);//$(".M-box3").whjPaging("setPage", {totalSize: 总条数, currPage: 当前页码, pageSize: 每页显⽰条数, totalPage: 总页数});
$(".M-box3").whjPaging("setPage", {currPage: currPage, totalPage: pages, totalSize: alen});
},
error:function(){
alert("出错了！");
}
});
}else{
alert("输⼊正确的档案号并且开始档案号⼤于等于结束档案号！")
}
}
//设置分页插件显⽰
$(".M-box3").whjPaging({
isResetPage: true,
callBack: function (currPage, pageSize) {
//回调函数传参
searchArchivesInfo(currPage, pageSize);
console.log('currPage:' + currPage + '    pageSize:' + pageSize );
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。