jQuery制作分页插件

来源：互联网发布：画工程图用什么软件编辑：程序博客网时间：2024/05/21 22:47

一款自己用jQuery做的分页插件。

1、html页面部分

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>pageBar</title>  <script src="jquery-3.1.0.min.js"></script>  <script src="page.js"></script>  <style>.bar{display:inline-block;line-height:22px;width:45px;border-radius:5px;border:2px solid #CA8EFF;margin-left:3px;text-align:center;font-size:15px;cursor:pointer;}.bar1{width:60px;}.bar2{background:#C4E1FF;cursor:text;}.left{margin-left:20px;}.ipt1{width:30px;margin:0 10px;}.line{border:1px solid gray;}  </style><script>$(function(){draw();});function draw(param){$("#pageBar").pageBar(param);}function confirm(){var currPage=$("#currPage").val();var param={currPage:currPage}draw(param);}function doSearch(currPage,pageSize){alert("查询第"+currPage+"页，每页"+pageSize+"条");}</script> </head> <body>  <div id="pageBar" style="margin-top:100px;"></div><div style="margin-top:50px;"><h3>模拟数据，测试分页功能</h3><div class="line"></div><table><tr><td>数据总数：</td><td><input id="total" value="200" /></td></tr><tr><td colspan="2"><input type="button" onclick="confirm();" value="确定" /></td></tr></table></div> </body></html>

2、jQuery插件部分

;(function($){$.fn.extend({pageBar:function(param){//先获得插件里面的值var total=$("#total").val();var pageSize=$("#pageSize").val()==null ? 10 : $("#pageSize").val();//然后清空分页内容$(this).empty();//最后重新绘制插件var maxPageCount=10;//最多显示是个页码按钮，超出部分中间用...显示options=$.extend({currPage:1},param);pageCount=Math.ceil(total/pageSize)==0 ? 1 : Math.ceil(total/pageSize);//total为0的时候，显示1页if(options.currPage>1){$(this).append($("<span>").addClass("bar").text("首页").on("click",function(){//查询var pageSize=$("#pageSize").val();doSearch(1,pageSize);//绘制分页$(this).parent().pageBar({currPage:1});}));$(this).append($("<span>").addClass("bar bar1").text("上一页").on("click",function(){var currPage=parseInt(options.currPage)-1;//查询var pageSize=$("#pageSize").val();doSearch(currPage,pageSize);//绘制分页$(this).parent().pageBar({currPage:currPage});}));}if(pageCount<=maxPageCount){//按钮数未超标for(var i=1;i<pageCount+1;i++){$(this).getBarByCurrPage(i,options.currPage);}}else{//超出最大按钮数if(options.currPage<9){//当前页在前面8个之中for(var i=1;i<9;i++){$(this).getBarByCurrPage(i,options.currPage);}$(this).append("...");$(this).getBarByCurrPage(pageCount,options.currPage);}else if(options.currPage>pageCount-8){//当前页在最后8个之中$(this).getBarByCurrPage(1,options.currPage);$(this).append("...");for(var i=pageCount-7;i<=pageCount;i++){$(this).getBarByCurrPage(i,options.currPage);}}else{//显示首页和尾页，中间显示包含当前页在内的7个，前后用...代替$(this).getBarByCurrPage(1,options.currPage);$(this).append("...");for(var i=options.currPage-3;i<=options.currPage+3;i++){$(this).getBarByCurrPage(i,options.currPage);}$(this).append("...");$(this).getBarByCurrPage(pageCount,options.currPage);}}if(options.currPage<pageCount){$(this).append($("<span>").addClass("bar bar1").text("下一页").on("click",function(){var currPage=parseInt(options.currPage)+1;//查询var pageSize=$("#pageSize").val();doSearch(currPage,pageSize);//绘制分页$(this).parent().pageBar({currPage:currPage});}));$(this).append($("<span>").addClass("bar").text("尾页").on("click",function(){//查询var pageSize=$("#pageSize").val();doSearch(pageCount,pageSize);//绘制分页$(this).parent().pageBar({currPage:pageCount});}));}$(this).append($("<span>").text("每页显示").addClass("ipt1")).append($("<select name='pageSize' id='pageSize'>").append($("<option>").val(10).text(10)).append($("<option>").val(20).text(20)).append($("<option>").val(30).text(30))).append($("<span>").text("页"));$("#pageSize").val(pageSize);//根据用户选择每页显示的数量，来选中pageSize的值$(this).append($("<span>").text("跳转到").addClass("left")).append($("<input name='page'>").addClass("ipt1")).append($("<span>").text("页")).append($("<span>").addClass("bar").text("GO").on("click",function(){var currPage=$("input[name='page']").val();if(currPage==""){alert("请输入要跳转到的页码");return;}//查询var pageSize=$("#pageSize").val();doSearch(currPage,pageSize);//绘制分页$(this).parent().pageBar({currPage:currPage});}));},/*绘制一个页码按钮，供上面的方法使用i 当前按钮显示的页数，currPage当前页*/getBarByCurrPage:function(i,currPage){if(i==currPage){$(this).append($("<span>").addClass("bar bar2").text(i));}else{$(this).append($("<span>").text(i).addClass("bar").on("click",function(){var currPage=parseInt($(this).text());//查询var pageSize=$("#pageSize").val();doSearch(currPage,pageSize);//点击按钮，当前页改变，重新布局按钮$(this).parent().pageBar({currPage:currPage});}));}}});})(jQuery);

3、效果如下图：

4、使用事项：

在需要引入分页按钮的地方，用$().pageBar(param);来调用方法，param是{currPage:1}的形式，参数是当前页，初始化的时候，param可以为空，默认为1。

绘制页码的时候，会用到total，currPage和pageSize。其中currPage和pageSize在初始化的时候有默认值，并且在后面都能在插件自身获取到，使用的时候需要在页面将total的值放在id为total的隐藏域中，插件会自动获取。

在点击按钮的时候，会重新绘制分页按钮，同时会触发doSearch(currPage,pageSize);方法，其中参数分别是当前页和每页显示多少条，如果需要查询数据，自己需要在页面中添加doSearch(currPage,pageSize);的方法，然后将参数传到后台即可。

0 0