一款好用的分页插件用于regularJS

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在用一款来自网易的javascript MVC 框架regularJS来写项目,这是网易一位叫郑海波的大神写的一款框架，所谓regualrJS，作者这样取名主要是因为这个框架更像是angular与react的集合体，按照作者的话说大概是regular = react(ractive) + angular，此框架对于我来说最好用的特点是模板对于数据的渲染。同时框架支持引入其他类似于jquery,zepto等轻量级前端框架。关于regular框架我就不多说了，有兴趣的同学，可以访问https://sdk.cn/news/2927这个地址，里面是作者自己分享的关于regular的种种特性。讲解很详细，让我受益良多。

今天我们主要来说一款分页插件pagation.js，这款框架是基于jquery的，如果有同学的代码是直接基于jquery的话，建议大家访问http://www.jq22.com/jquery-info5697此地址。写这款插件的作者在里面进行了详细的描述。

下面我主要针对regularJs 这款框架如何使用进行简单的讲解。

首先引入js http://106.2.44.116/src/javascript/base/jquery.pagination.js

我的项目是基于freemarker写的。在ftl 文件中引入js ,同时在ftl文件初始化

1     <div id="container" class="container">

     //container 为插入页面的盒子

     </div>

     <div class="box" style="height:20px;">

     </div>

     <script src="/src/javascript/base/regular.js"></script>

     <script src="/nej/src/define.js?pro=/src/javascript/&module=/src/html/"></script>

     <script src="/src/javascript/admin.js?v=20170419"></script>

在container中插入整个regalar模板，box则是分页的盒子

接下来我们可以在模板js里单独写一个方法，用来展示分页，如下完成初始化：

  PaginationSearch:function(){//regular 写方法的基本结构

             var that = this;

             $('.box').pagination({

                 totalData:that.data.total,//总条数

                 showData:15,//每页展示条数

                 coping:true,//开启首页和末页

                 jump:true,//开启跳转

                 keepShowPN:true,//一直显示上一页和下一页，不消失

                 homePage:'首页',//首页节点展示的文字信息

                 endPage:'末页',//末页节点展示的文字信息

                 prevContent:'上页',//上一页节点展示的文字信息

                 nextContent:'下页',//下一页节点展示的文字信息

                 callback:function(api){//点击节点后进行的回调

                    $('.now').text(api.getCurrent());

             },function(api){//初始化完成后进行的回调

                  $('.now').text(api.getCurrent());

             });

         }

其中分页的属性设置在对象中一一设置就好了，callback可以写点击页码后的操作，回调function为初始化显示分页后进行的操作，之后会对这两个方法进行详解

options(参数配置)

参数	默认值	说明
pageCount	9	总页数
totalData	0	数据总条数
current	1	当前第几页
showData	0	每页显示的条数
prevCls	'prev'	上一页class
nextCls	'next'	下一页class
prevContent	'<'	上一页节点内容
nextContent	'>'	下一页节点内容
activeCls	'active'	当前页选中状态class名
count	3	当前选中页前后页数
coping	false	是否开启首页和末页，值为boolean
isHide	false	总页数为0或1时隐藏分页控件
keepShowPN	false	是否一直显示上一页下一页
homePage	''	首页节点内容，默认为空
endPage	''	尾页节点内容，默认为空
jump	false	是否开启跳转到指定页数，值为boolean类型
jumpIptCls	'jump-ipt'	文本框内容
jumpBtnCls	'jump-btn'	跳转按钮class
jumpBtn	'跳转'	跳转按钮文本内容
callback	function(){}	回调函数，参数"index"为当前页

api接口

方法	参数	说明
getPageCount()	无	获取总页数
setPageCount(page)	page：页数	设置总页数
getCurrent()	无	获取当前页
filling()	无	填充数据，参数为页数

如果你的分页是和后端有交互的分页，可以在callback函数中发异步请求请求分页数据

  PaginationSearch:function(){

            var that = this;

            $('.box').pagination({

                totalData:that.data.total,

                showData:15,

                coping:true,

              jump:true,

              keepShowPN:true,

              homePage:'首页',

               endPage:'末页',

              prevContent:'上页',

              nextContent:'下页',

                callback:function(api){

                    $('.now').text(api.getCurrent());

                    var postParams = {//请求参数

                                pageSize: 15,//每页15条

                                currPage:api.getCurrent(),//当前页

                    };

                    xdr._$request('/workcardadmin/search.do', {//此方法的异步请求是nej的。也可以用$.ajax()的方式

                        method: 'POST',

                        type: 'JSON',

                        timeout: 5000,

                        data: _u._$object2query(postParams),

                        onbeforerequest:function() {

                            that.data.load = true;

                        },

                        onload: function(data) {//相当于jquery的success

                            if (data.code === 200){

                                setTimeout(function(){

                                    that.data.load = false;

                                    if(data.data == null){

                                           }else{

                                           $(".box").show();

                                           that.data.auditList=data.data.list;//获取到的数据

                                           that.data.total = data.data.totalCount;//获取到的数据

                                        }

                                        that.$update();

                                },100);

                            } 

                        },

                        onerror: function() {

                             alert("网络繁忙，请稍后再试");

                        }

                    });

                }

            },function(api){

                 $('.now').text(api.getCurrent());

            });

        },

代码中进行了注释，其中有一点。api.current()是当前页码

接下来说一下回调函数的作用，顾名思义，这个function的作用其实就是初始化分页展示完成，没有进行任何操作时希望进行的操作，比如进行样式操作。获取当前页码比较操作等

function(api){

                 $('.now').text(api.getCurrent());

                if(api.getCurrent()!=1){

                     $('.prev').css({

                         'background':'#305fa7',

                         'color':'#fff'

                     });

                }

                if(api.getCurrent() != api.getPageCount()){

                    $('.next').css({

                         'background':'#305fa7',

                         'color':'#fff'

                    })

                }

                $('.jump-btn').css({

                    'background':'#305fa7',

                    'color':'#fff'

                  });

            });