首页 | 5679 | 921 | 3153 | 添加收藏 上一个 下一个
jQuery仿淘宝分页插件(原创)

更新说明:


1, 新增不合法页面值规避机制,输入页码小于1,会默认跳转到第1页,页码超过分页总数,默认跳转到最后一页;其他不合法字段,如文字等,都会跳转到第1页,具体逻辑,各位下载后可自行更改.


2, 分页内容的加载方法更改,改由调用时传入


3, 调用时需传递分页内容加载方法,如:


var obj = {
    obj_box: '.class/#id...', //翻页容器(css选择器均可)
    total_item: '自然数,必填', //条目总数
    per_num: '自然数,选填,默认10', //每页条目数
    current_page: '自然数,选填,默认1', //当前页
    change_content: function(per_num, current_page) {
        //内容加载方法,可参考示例
    }
};
page_ctrl(obj); //调用分页插件

插件使用(注意引入脚本路径)


举例说明:


1,html中引入分页样式文件


 <link rel="stylesheet" href="css/toPage.css">

2,指定分页容器()数量不限,不同容器中的分页互不影响)


<!--分页容器_1-->
<div ></div>
<!--分页容器_2-->
<div ></div>
......

3,引入必要js


<!--先引入jquery-->
<script src="jquery/jquery-1.10.2.js"></script>
<!--再引入toPage.js-->
<script src="js/toPage.js"></script>

4,最后调用即可


 /*容器1参数*/
 var obj_1 = {
     obj_box: '.page_1', //翻页容器
     total_item: 72 //条目总数
     /*per_num:10,//每页条目数
     current_page:8//当前页*/
 };
 /*容器2参数*/
 var obj_2 = {
     obj_box: '.page_2', //翻页容器
     total_item: 372, //条目总数
     per_num: 20, //每页条目数
     current_page: 8 //当前页
 };
 /*调用分页方法,初始化数据*/
 page_ctrl(obj_1);
 page_ctrl(obj_2);