# jquery-sdpagination.js **Repository Path**: lhtzbj12/jquery-sdpagination.js ## Basic Information - **Project Name**: jquery-sdpagination.js - **Description**: 一款简单易用的jQuery分页插件。插件结构是典型jQuery插件结构,有助于学习jQuery插件开发。兼容IE7及以上IE浏览器,兼容火狐、谷歌、360、猎豹等主流浏览器。基于Sass/Scss重写css,新增四种颜色的皮肤。演示:http://www.nllive.cn/sdpagination/ - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 34 - **Forks**: 10 - **Created**: 2016-12-26 - **Last Updated**: 2024-04-10 ## Categories & Tags **Categories**: jquery-plugins **Tags**: None ## README 近期将原有的生成分页导航的function整理成了一个独立的jQuery插件,使用更简单更方便了,使用插件时可以简单的传入一些参数来启用功能或者修改显示效果。效果如下图所示。插件结构是典型jQuery插件结构,有助于学习jQuery插件开发。兼容IE7及以上浏览器,兼容火狐、谷歌、360、猎豹等主流浏览器。基于Sass/Scss重写css,新增四种颜色的皮肤。 插件演示:http://www.nllive.cn/sdpagination/ ![输入图片说明](http://git.oschina.net/uploads/images/2017/0209/230639_a167980c_576197.png "在这里输入图片标题") **输入参数** **参数表** ![输入图片说明](http://git.oschina.net/uploads/images/2017/0210/211928_d7c027e2_576197.png "在这里输入图片标题") **回调表** ![输入图片说明](http://git.oschina.net/uploads/images/2017/0108/154643_8a0a1999_576197.png "在这里输入图片标题") ``` //最简单的调用 #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') } }); ```