jQuery分页插件支持ajax(原创)

所属分类： JQ特效导航分页

查看演示立即下载

插件描述：JQuery分页插件支持ajax，可自定义展示数量

更新时间：2020-04-11 21:26:51

更新说明：删除了JQuery依赖，只需要引用一个js文件就可以。

更新时间：2019/9/8 下午10:54:39

更新说明：增加跳页，可设置只有一页时是否显示

更新时间：2019-08-11 22:15:11

xlPaging

一个简单的分页插件，支持ajax，可以自定义展示数量

使用方法

1. 下载并引入JQuery和xlPaging.js

2. 在页面中增加一个盛放分页的DIV

1	`<div` `id="page"></div>`

3. 在JS中对分页进行配置,其中pageNum为必写项。

简单模式

$("#page").paging({
    pageNum: 7, //总页码
   callback: function(num) { //回调函数,num为当前页码
         console.log(num);
    }
});

高级模式

$("#page").paging({
    nowPage: 1, // 当前页码,默认为1
    pageNum: 20, // 总页码
    buttonNum: 7, //要展示的页码数量，默认为7，若小于5则为5
    callback: function(num) { //回调函数,num为当前页码
        console.log(num);
    }
});

4. 对分页进行个性化

<style>
    //#page 的page是您自定义的id
         #page {
             margin: 20px auto;
             color: #666;
             display: block;
             text-align: center;
         }
       //所有li的样式
         #page li {
             display: inline-block;
             min-width: 30px;
             height: 28px;
             cursor: pointer;
             color: #666;
             font-size: 13px;
             line-height: 28px;
             background-color: #f9f9f9;
             border: 1px solid #dce0e0;
             text-align: center;
             margin: 0 4px;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
         }
       //上一页和下一页的样式
         .xl-nextPage,.xl-prevPage {
             width: 60px;
             color: #0073A9;
             height: 28px;
         }
       //失效状态样式
         #page li.xl-disabled {
             opacity: .5;
             cursor: no-drop;
         }
       //当前页码显示状态
         #page li.xl-active {
             background-color: #0073A9;
             border-color: #0073A9;
             color: #FFF
         }
</style>

# 分页结构

<div id="page">
    <ul>
        <li class="xl-prevPage">上一页</li>
        <li>1</li>
        <li class="xl-disabled">...</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li class="xl-active">20</li>
        <li class="xl-nextPage xl-disabled">下一页</li>
    </ul>
</div>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery获取一年后的日期（原创）
下一个特效：旋转菜单导航（原创）