当前位置: 首页 > 工具软件 > RegularJS > 使用案例 >

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

蒋弘致
2023-12-01

最近在用一款来自网易的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">
2     //container 为插入页面的盒子
3     </div>
4     <div class="box" style="height:20px;">
5     </div>
6     <script src="/src/javascript/base/regular.js"></script>
7     <script src="/nej/src/define.js?pro=/src/javascript/&module=/src/html/"></script>
8     <script src="/src/javascript/admin.js?v=20170419"></script>

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

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

 1  PaginationSearch:function(){//regular 写方法的基本结构
 2             var that = this; 
 3             $('.box').pagination({
 4                 totalData:that.data.total,//总条数
 5                 showData:15,//每页展示条数
 6                 coping:true,//开启首页和末页
 7                 jump:true,//开启跳转
 8                 keepShowPN:true,//一直显示上一页和下一页,不消失
 9                 homePage:'首页',//首页节点展示的文字信息
10                 endPage:'末页',//末页节点展示的文字信息
11                 prevContent:'上页',//上一页节点展示的文字信息
12                 nextContent:'下页',//下一页节点展示的文字信息
13                 callback:function(api){//点击节点后进行的回调
14                    $('.now').text(api.getCurrent());
15                 
16             },function(api){//初始化完成后进行的回调
17                  $('.now').text(api.getCurrent());
18              
19             });
20         }

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

options(参数配置)

参数默认值说明
pageCount9总页数
totalData0数据总条数
current1当前第几页
showData0每页显示的条数
prevCls'prev'上一页class
nextCls'next'下一页class
prevContent'<'上一页节点内容
nextContent'>'下一页节点内容
activeCls'active'当前页选中状态class名
count3当前选中页前后页数
copingfalse是否开启首页和末页,值为boolean
isHidefalse总页数为0或1时隐藏分页控件
keepShowPNfalse是否一直显示上一页下一页
homePage''首页节点内容,默认为空
endPage''尾页节点内容,默认为空
jumpfalse是否开启跳转到指定页数,值为boolean类型
jumpIptCls'jump-ipt'文本框内容
jumpBtnCls'jump-btn'跳转按钮class
jumpBtn'跳转'跳转按钮文本内容
callbackfunction(){}回调函数,参数"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'
                  });
            });

上面代码是判断当前页如果不是第一页,则上一页的样式变化,不是最后一页则最后一页样式变化

至此,关于此插件的操作大概就说完了。当然如果你想多次重复调用展示页码也是可以的,只需要把每个点击页码的回调函数中地址,参数都用变量存储随时复制就好了,regular中可以不用var 来存储声明一个变量,在init得data中声明,下面用 this.data.名字来调用就可以啦。设置方式

 data: {
          audit:false
  }

调用方式:

this.data.audit

顺便提一句 这个分页插件是组件样式与功能分离的,可自定义样式,具体样式无需引用什么,直接在css中修改就可以了

好了。我想分享的大概就是这些,解释的不清楚,话语啰嗦请大家海涵。有问题也可以评论问我。希望这篇文章可以对大家有所帮助。

 

 

 

转载于:https://www.cnblogs.com/aiiright/p/6734384.html

 类似资料: