18 Star 34 Fork 10

lhtzbj12 / jquery-sdpagination.js

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

近期将原有的生成分页导航的function整理成了一个独立的jQuery插件,使用更简单更方便了,使用插件时可以简单的传入一些参数来启用功能或者修改显示效果。效果如下图所示。插件结构是典型jQuery插件结构,有助于学习jQuery插件开发。兼容IE7及以上浏览器,兼容火狐、谷歌、360、猎豹等主流浏览器。基于Sass/Scss重写css,新增四种颜色的皮肤。 插件演示:http://www.nllive.cn/sdpagination/ 输入图片说明

输入参数 参数表 输入图片说明 回调表 输入图片说明

//最简单的调用 #PagerContainer1 为页面里的div
$("#PagerContainer1").sdpagination({
        totalCount: 500,                                  //总条数
        pageSize: 20,                                     //每页显示
        pageIndex: 1,                                     //当前页数
        onPageIndexChange: function (pageIndex, pageSize) { //回调,点击按钮时或者输入页数时,激发onPageIndexChange事件,回调参数为 新页数、PageSize
            //页数变化了,该干点啥,
            $("#PageIndex").val(pageIndex);
            $("#searchForm").submit();
        }
});
//复杂调用 #PagerContainer3 为页面里的div
 $("#PagerContainer3").sdpagination({
        boxClass: "sdpagination",                         //生成的容器的class,再后面的追加sdpagination-large、sdpagination-small改变大小,sdpagination-blue、sdpagination-green、sdpagination-orange、sdpagination-red加载皮肤
        totalCount: 500,                                  //总条数
        pageSize: 20,                                     //每页显示
        pageIndex: 1,                                     //当前页数
        preText: '上页',                                  //上一页按钮显示的字符
        nextText: '下页',                                 //下一页按钮显示的字符
        firstText: '首页',                                //首页按钮显示的字符
        lastText: '末页',                                 //末页按钮显示的字符
        showNearby: 3,                                    //当前按钮前后按钮数
        infoTemplet: '每页{pageSize} 共{totalCount} 当前{pageIndex}/{pageCount}',//自定义信息模板
        pageList: [5, 10, 20],                              //设置PageSize下拉框的选择项,
        onPageIndexChange: function (pageIndex, pageSize) { //回调,点击按钮时或者输入页时调用,回调参数为 新页数、PageSize
            //页数变化了,该干点啥,
            $("#PageIndex").val(pageIndex);
            $("#searchForm").submit();
        },
        onPageSizeChange: function (pageSize) {         //回调,当在PageSize下拉框里选择时调用,回调参数为 新PageSize
            //pageSize变化了,该干点啥,                //注意,分页信息里要显示PageSize的值,同时设置了onPageSizeChange回调时,才会出现PageSize下拉框
            $("#PageIndex").val(1);
            $("#PageSize").val(pageSize);
            $("#searchForm").submit();
        },
        onPageIndexOutOfRange:function(pageIndex,pageCount){//回调,当pageIndex>pageCount或者pageCount>0&&pageIndex=0时调用,回调参数为 pageIndex、pageCount
            //pageIndex越界
            alert('PageIndex out of Range')
        }
});

空文件

简介

一款简单易用的jQuery分页插件。插件结构是典型jQuery插件结构,有助于学习jQuery插件开发。兼容IE7及以上IE浏览器,兼容火狐、谷歌、360、猎豹等主流浏览器。基于Sass/Scss重写css,新增四种颜色的皮肤。演示:http://www.nllive.cn/sdpagination/ 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/lhtzbj12/jquery-sdpagination.js.git
git@gitee.com:lhtzbj12/jquery-sdpagination.js.git
lhtzbj12
jquery-sdpagination.js
jquery-sdpagination.js
master

搜索帮助