浙江爱信诺前端规范

组件 - 分页

使用说明
                            
                            <link rel="stylesheet" type="text/css" href="paging.css" />
                            
                            
                            <div id="datalist"></div> 
                            <div class="m-paging"></div> 
                            
                            
                            <script type="text/javascript" src="jquery.js"></script>
                            <script type="text/javascript" src="jquery.paging.js"></script>
                            
                            
                            $.paging(配置参数);
                            
                            
                            window['paging'] = new Paging(配置参数);
                            window['paging'].query();
                            

接口会接收pCount和current二个参数,分别表示一页显示个数和当前页码

接口必须返回数据总数,属性建议为aCount,否则需要在echoData方法中重新赋值,因为组件分页逻辑中使用到了aCount属性

实例

页面无刷新

                                <ul class="m-demo" id="data1"></ul>
                                <div class="m-paging" id="paging1"></div>
                                
                                $.paging({
                                    url:'../data.json',
                                    pCount:5,
                                    wrap:$('#paging1'),
                                    loading:{
                                        wrap:$('#data1')
                                    },
                                    echoData:function(data){
                                        if(data.result == 'success'){
                                            var html = (function(list){
                                                var arr = [];
                                                $.each(list, function(k, v){
                                                    arr.push('
  • '+ v.buname +'
  • '); }); return arr.join(''); })(data.list); $('#data1').html(html); } } });

    传统页面刷新

                                  <ul class="m-demo" id="data2"></ul>
                                  <div class="m-paging" id="paging2"></div>
                                  
                                  $.ajax({
                                      url:'../data.json',
                                      dataType:'json',
                                      cache:false,
                                      success:function(res){
                                          var page = parseInt(tools.getParam('page')||1);
                                          var crt = (page-1)*4;
                                          var data = res.slice(crt, crt+4);
                                          var arr = [];
                                          $.each(data, function(k, v){
                                              arr.push('
    • '+ v.title +'
    • '); }); $('#data2').html(arr.join('')); window['pages'] = new Paging({ pCount:4, aCount:res.length, current:page, wrap:$('#paging2'), isFull:false, refreshCallback:function(current){ tools.jumpUrl(tools.setParam('page', current)); } }); pages.query('refresh'); } });

      滚动加载

      全部 按价格 按访问量
        							<a href="javascript:void(0);" class="menu" type="">全部</a>
        							<a href="javascript:void(0);" class="menu e-ml10" type="1">按价格</a>
        							<a href="javascript:void(0);" class="menu e-ml10" type="2">按访问量</a>
                                    <div class="m-demo" id="data3" style="height:250px; overflow:auto;">
        								<ul id="boxs"></ul>
        							</div>
                                    
                                    window['page'] = new Paging({
        								url:'http://192.168.1.109/data/?callback=?',
        								pCount:10,
        								loading:{
        									wrap:$('#data1')
        								},
        								scroll:{
        									enable:true,
        									container:'#data3'
        								},
        								echoData:function(res, type){
        									var tpl = '';
        									$.each(res.list, function(k, v){
        										tpl += '
      • '+ v.buname +'
      • '; }); if(type === 'jump'){ $('#boxs').append(tpl); } else{ $('#boxs').html(tpl); this.container.scrollTop(0) } } }); $('.menu').click(function(){ var me = $(this); if(me.hasClass('s-crt')){ return; } me.addClass('s-crt').siblings('.menu').removeClass('s-crt'); page.condition.type = me.attr('type'); page.query(true); }).eq(0).click();
        API
        普通属性 值类型 默认值 可填值 功能说明
        url String '' url地址 ajax请求url
        wrap Object null null/jquery object 页码容器
        paramJSON String '' 英文字符串 传递参数值,将传递参数封装为json字符串,后台接收该参数来获取该json
        pCount Number 10 正整数 当页显示数量,请求接口会传递该参数
        current Number 10 正整数 当前页码,请求接口会传递该参数
        aCount Number 10 正整数 列表数据总数
        last Boolean false true/false 是否初始化展示最后一页
        allData Boolean false true/false 是否读取全部数据,该参数启用后,接口将无法接收到pCount和current参数,前后端约定好,若没接收到这2个参数,将返回全部数据
        isFull Boolean true true/false 是否完整形式展示分页
        ajax Object, Function {} {key:value,...} ajax配置信息,若为为函数,则需要返回对象
        condition Object {} {key:value,...} 接口接收参数
        对象属性 属性名 值类型 默认值 可填值 功能说明
        loading wrap Obejct null null/jquery object loading容器
        show Function function(){...} function(){...} 显示loading
        hide Function function(){...} function(){...} 隐藏loading
        button prev String « 任意字符串 上一页按钮文本内容
        next String » 任意字符串 下一页按钮文本内容
        scroll enable Boolean false true | false 是否启用滚动分页
        container String | DOM Object | jQuery Object window String | DOM Object | jQuery Object 滚动容器
        extPage wrap Obejct null null/jquery object 拓展分页容器
        desc String '' 任意字符串 展示文字内容
        prev String « 任意字符串 上一页按钮文本内容
        next String » 任意字符串 下一页按钮文本内容
        普通方法 参数 参数说明 返回值 功能说明
        refreshCallback current 目标页码 - 传统页面刷新方式,在函数内使用location跳转,建议使用new Paging()方式调用分页组件,手动设置aCount和current属性,然后调用query('refresh')
        endCallback data 响应数据 - ajax响应数据并且分页创建完毕后回调函数
        echoData data 响应数据 - 分页数据处理
        实例对象方法 参数 参数值 类型 参数说明 功能说明
        query type true Boolean 重新加载数据,保留查询条件 查询数据
        false/不传参/空字符串 Boolean/undefined/String 重新加载数据,清空查询条件
        reload String 在当前页码刷新分页数据
        refresh String 传统页面刷新,搭配refreshCallback使用
        jump page 页码 Number 分页跳转,-1为跳转到尾页
        下载
        paging.css jquery.paging.js
        版本更新