page分页

功能介绍：

可自行设置设置每页显示数据条数（pageSize），数据总条数（totalCount），当前页数（curPage），显示多少个页码（nav_count），点击分页后的回调函数（callback）；

McrbHttpClient.loadPage.init({el,pageSize,totalCount,curPage,nav_count,callback);

参数说明：

实例1：

// table表格参数
                const columns3 = [
                    {key: 'name',title: '姓名', align: 'center',},
                    {key: 'age',title: '年龄',align: 'center',},
                    {key: 'job',title: '工作',align: 'center',}, 
                    {key: 'action',title: '操作',align: 'center',render:function (text, data){
                        return McrbHttpClient.tableDom.createTool([{
                                type:'del',text:'删除',classname:'delBtn'},{
                                type:'edit',text:'修改',classname:'editBtn'},{
                                type:'look',text:'查看',classname:'lookBtn'}],data,function(e,type){
                                        // e:点击行数据
                                        // type:点击事件执行类型--删除、修改、查看
                                        if(type == 'del'){
                                            console.log('删除数据：')
                                            console.log(e)
                                        }else if(type == 'edit'){
                                            console.log('修改数据：')
                                            console.log(e)
                                        }else if(type == 'look'){
                                            console.log('查看数据：')
                                            console.log(e)
                                        }
                                    })
                        }
                    },
                ];
                // table表格数据
                const data3 = [
                    {name: '张三', age: '20', job: '经理'}, 
                    {name: '李四',age: '21', job: '总监'},
                    {name: '周五',age: '22', job: '实习生'},
                    {name: '郑六',age: '23', job: '职员'},
                    {name: '郑1',age: '23', job: '职员'}, 
                    {name: '郑2',age: '23', job: '职员'}, 
                    {name: '郑3',age: '23', job: '职员'}, 
                    {name: '郑4',age: '23', job: '职员'}, 
                    {name: '郑5',age: '23', job: '职员'}, 
                    {name: '郑6',age: '23', job: '职员'}, 
                    {name: '郑7',age: '23', job: '职员'}, 
                    {name: '郑8',age: '23', job: '职员'}, 
                    {name: '郑9',age: '23', job: '职员'}, 
                    {name: '郑11',age: '23', job: '职员'}, 
                    {name: '郑12',age: '23', job: '职员'}, 
                    {name: '郑13',age: '23', job: '职员'}, 
                    {name: '郑14',age: '23', job: '职员'}, 
                    {name: '郑15',age: '23', job: '职员'},
                ]
                // 渲染 page+table
                McrbHttpClient.loadPage.init({
                    el:'#table_page',
                    pageSize:5,//每页显示条数
                    totalCount:data3.length,//总记录数
                    curPage:1,//当前页数，不设置则默认1
                    nav_count:5,//显示多少个导航
                    callback:function(curPage,start,end){//点击翻页后的回调函数
                        console.log("正在加载第("+curPage+")页的数据，请稍后.......");
                        var dataSource = [];
                        for( var i = start; i < end; i++){
                            dataSource.push(data3[i]);
                            if(i == (end - 1)){
                                McrbHttpClient.tableDom.common({columns:columns3, dataSource:dataSource,},'tableDOM3');
                            }
                        }
                    }
                });

效果展示：

组合：列表 + 分页

参数说明：

分页切换时回调函数callback中返回curPage, start, end, listObj, pageObj

curPage 当前页码，start 开始，end 结束，listObj 列表对象，pageObj 分页对象

分页切换 - 重新赋值数据 + 渲染
listObj.options.dataSource = dataSource;
listObj.render(listObj.options);

如果初始化渲染第2页，只需浏览器地址中拼上参数curPage=2即可

// 实例如下：
                <div id="tabledom"></div>
                
                const cols = [
                    {key: 'name',title: '姓名', align: 'center',}, 
                    {key: 'age',title: '年龄',align: 'center',},
                    {key: 'job',title: '工作',align: 'center',render:function (text, data){
                            return '<span style="color:red;">'+text+'</span>'
                        }
                    },
                ];
                
                // 表格数据
                const data = [
                    {name: '张三', age: '20', job: '经理'}, 
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                    {name: '张三', age: '20', job: '经理'},
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                    {name: '张三', age: '20', job: '经理'},
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                    {name: '张三', age: '20', job: '经理'},
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                    {name: '张三', age: '20', job: '经理'},
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                ]
                
                // 配置列表参数（参考3.4.9）
                var options1 = {
                    columns: cols,
                    dataSource: data,
                    width: '100%',
                    ischeck: true,
                }
                // options2 配置分页参数（参考3.4.10）
                var options2 = {
                    pageSize:5,//每页显示条数
                    totalCount:data.length,//总记录数
                    curPage:1,//当前页数，不设置则默认1
                    nav_count:5,//显示多少个导航
                }
                // callback 分页切换回调函数
                var callback = function(curPage, start, end, listObj, pageObj){
                    console.log("正在加载第("+curPage+")页的数据，从"+start+"到"+end+"请稍后.......");
                    console.log(listObj)
                    console.log(pageObj)
                    
                    var dataSource = [];
                    for( var i = start; i < end; i++){
                        dataSource.push(data[i]);
                        if(i == (end - 1)){
                            // 重新赋值 + 渲染
                            listObj.options.dataSource = dataSource;
                            listObj.render(listObj.options);
                        }
                    }
                }
                
                /**创建实例对象
                 * id 装载容器ID
                 */ 
                var list = McrbHttpClient.listPage('tabledom');
                /**渲染
                 * options1 配置列表参数（参考3.4.9）
                 * options2 配置分页参数（参考3.4.10）
                 * callback 分页切换回调函数
                 */ 
                list.render(options1, options2, callback);