首页 | 3802 | 539 | 2197 | 添加收藏 上一个 下一个
jQuery分页插件支持ajax(原创)

xlPaging


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


使用方法



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

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


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


  1. 在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);
    }
});


  1. 对分页进行个性化


<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>