首先引入jq，再引pagination.min.js；pagination.css

 

pagination.min.js

/** * @version: v1.7 * @author: xgc-whj * @date: 2018-05-25 21:40:00 * @license: MIT license release * @jq22 address: http://www.jq22.com/jquery-info17548 * @GitHub: https://github.com/w0624/jquery-pagination * @description: jQuery分页插件，可自定义样式，默认有五套样式，可自定义插件选项，简单方便，兼容IE8 */(function(){$.fn.extend({whjPaging:function(b,r){
   var g=$(this);if(b==="getPage"){
   return{totalSize:g.get(0).pageText.totalSize,currPage:g.get(0).pageText.staticCurrPage,pageSize:g.get(0).pageText.staticPageSize,totalPage:g.get(0).pageText.staticTotalPage}}else{
   if(b==="setPage"){g.get(0).pageText.currPage=r.currPage!=null?r.currPage:null;g.get(0).pageText.totalPage=r.totalPage!=null?r.totalPage:null;g.get(0).pageText.totalSize=r.totalSize!=null?r.totalSize:null;if(g.get(0).pageText.isShowPageSizeOpt){c()}}else{
   if(b!=null){
   var o=[{value:20,text:"20条/页",selected:true},{value:100,text:"100条/页"},{value:500,text:"500条/页"},{value:1000,text:"1000条/页"}];if(b.pageSizeOpt!=null){o=b.pageSizeOpt}var s=o[0].value;var x=o.length;for(var m=0;m
     
      g.get(0).pageText.totalPage){g.get(0).pageText.currPage=g.get(0).pageText.totalPage}}g.get(0).pageText.staticCurrPage=g.get(0).pageText.currPage;g.get(0).pageText.staticPageSize=g.get(0).pageText.pageSize;g.get(0).pageText.staticTotalPage=g.get(0).pageText.totalPage;var h=g.get(0).pageText.currPage<2?"whj_hoverDisable":"whj_hover";var e=g.get(0).pageText.currPage>=g.get(0).pageText.totalPage?"whj_hoverDisable":"whj_hover";var q=0;var f=0;var y=parseInt(g.get(0).pageText.showPageNum/2);if(g.get(0).pageText.showPageNum<2){f=g.get(0).pageText.currPage}else{if(g.get(0).pageText.totalPage<=g.get(0).pageText.showPageNum){f=1}else{if(g.get(0).pageText.currPage+y>g.get(0).pageText.totalPage){f=g.get(0).pageText.totalPage-g.get(0).pageText.showPageNum+1}else{if(g.get(0).pageText.currPage-y<1){f=1}else{f=g.get(0).pageText.currPage-y}}}}var t='
      
       ';if(g.get(0).pageText.isShowFL){t+='
       
        '+g.get(0).pageText.firstPage+"
       
"}t+='
       
        '+g.get(0).pageText.previousPage+"
       
";if(g.get(0).pageText.showPageNum>0){for(var n=f;n<=g.get(0).pageText.totalPage;n++){q++;var v=g.get(0).pageText.currPage==n?"whj_checked":"whj_hover";t+='
       
        '+n+"
       
";if(q>=g.get(0).pageText.showPageNum){break}}}t+='
       
        '+g.get(0).pageText.nextPage+"
       
";if(g.get(0).pageText.isShowFL){t+='
       
        '+g.get(0).pageText.lastPage+"
       
"}if(g.get(0).pageText.isShowPageSizeOpt){t+='
       ';for(var w in g.get(0).pageText.pageSizeOpt){var j=g.get(0).pageText.pageSizeOpt[w].selected?"selected":"";t+='"+g.get(0).pageText.pageSizeOpt[w].text+""}t+=""}if(g.get(0).pageText.isShowSkip){t+='
       
        '+g.get(0).pageText.skip+'
       
       
       
        '+g.get(0).pageText.confirm+"
       
"}if(g.get(0).pageText.isShowRefresh){t+='
       
        '+g.get(0).pageText.refresh+"
       
"}if(g.get(0).pageText.isShowTotalPage){var p=g.get(0).pageText.totalPageText.replace("{}",g.get(0).pageText.totalPage);t+='
       
        '+p+"
       
"}if(g.get(0).pageText.isShowTotalSize){var a=g.get(0).pageText.isShowTotalPage?"whj_totalSizeSingle":"";var l=g.get(0).pageText.totalSizeText.replace("{}",g.get(0).pageText.totalSize);t+='
       
        '+l+"
       
"}t+="
      
";g.html(t);if(g.get(0).pageText.isShowFL){if(h=="whj_hover"){g.find("div[name='whj_firstPage']").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=1;u()})}if(e=="whj_hover"){g.find("div[name='whj_lastPage']").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticTotalPage}else{g.get(0).pageText.currPage=g.get(0).pageText.totalPage}u()})}}if(h=="whj_hover"){g.find("div[name='whj_previousPage']").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage-1}else{g.get(0).pageText.currPage=g.get(0).pageText.currPage-1}u()})}if(e=="whj_hover"){g.find("div[name='whj_nextPage']").click(function(){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage+1}else{g.get(0).pageText.currPage=g.get(0).pageText.currPage+1}u()})}if(g.find("div[name='whj_page']").length>0){g.find("div[name='whj_page']").click(function(){if(!$(this).hasClass("whj_checked")){if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=+$(this).data("page");u()}})}if(g.get(0).pageText.isShowPageSizeOpt){g.find("select[name='whj_pageSize']").change(function(){var i=+$(this).val();if(g.get(0).pageText.isResetPage){$(this).find("option[value='"+g.get(0).pageText.staticPageSize+"']").prop("selected",true)}var k=parseInt(g.get(0).pageText.totalSize/i);if(k*i
      
       0){i=+i;if(i<1){i=1}else{
   if(i>g.get(0).pageText.totalPage){i=g.get(0).pageText.totalPage}}if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize}g.get(0).pageText.currPage=i;u()}})}if(g.get(0).pageText.isShowRefresh){g.find("div[name='whj_refresh']").click(function(){
   if(g.get(0).pageText.isResetPage){g.get(0).pageText.pageSize=g.get(0).pageText.staticPageSize;g.get(0).pageText.currPage=g.get(0).pageText.staticCurrPage}u()})}function u(){
   if(!g.get(0).pageText.isResetPage){g.whjPaging()}g.get(0).pageText.callBack(g.get(0).pageText.currPage,g.get(0).pageText.pageSize)}function c(){
   var k=[];var z=g.get(0).pageText.pageSizeOpt;for(var i in z){
   if(z[i].value==g.get(0).pageText.pageSize){k.push({value:z[i].value,text:z[i].text,selected:true})}else{k.push({value:z[i].value,text:z[i].text})}}g.get(0).pageText.pageSizeOpt=k}}})})();
      
     

pagination.css

@charset "UTF-8";/** * @version: v1.7 * @author: xgc-whj * @date: 2018-05-25 21:40:00 * @license: MIT license release * @jq22 address: http://www.jq22.com/jquery-info17548 * @GitHub: https://github.com/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: res.totalPage, totalSize: res.totalSize});    }  });}$("#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="搜索" οnclick="searchArchivesInfo(1,20)"></div>

//οnclick="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(!zheng.test(qsfor) && !zheng.test(jsfor) && !zheng.test(qsfiv) && !zheng.test(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
     
      " +                            "
      " +                            /*"
      
"+*/                            ""+index+""+                            ""+data[i].CLANNO+""+                            ""+data[i].DIRECTORYNO+""+                            ""+data[i].YEAR+""+                            ""+data[i].CODE+""+                            ""+data[i].NAME+""+                            ""+data[i].ADDRESS+""+                            ""+                            ""+                            ""+data[i].LANDNO+""+                            ""+data[i].USEAREA+""+                            ""+data[i].TIME+""+                        "");                    }                }else{                    $("#contentTable").append("无数据！");                }                var pages =  Math.ceil(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 );    }});