jquery分页插件jquery.pagination.js使用方法百度云下载

jquery.pagination.js安装使用

• 下载 jquery.pagination.js
• 学习网站：文档
• 百度云: 链接：https://pan.baidu.com/s/1sCFqeUw4WDDOIrLEYTNTLw 密码：dfdl
• HTML插入

<script src="plugins/jquery.min.js" type="text/javascript"></script>
<script src="plugins/jquery.pagination.js" type="text/javascript"></script>

• 需要一个div
  第一个参数 total 必填
  第二个 调用函数

    $("#Pagination").pagination(total, {
        num_edge_entries: 1, //边缘页数
        num_display_entries: 4, //主体页数
        callback: pageselectCallback,
        items_per_page: 4, //每页显示个数
        prev_text: "前一页",
        next_text: "后一页"
    });	
   // 第一个参数 page 必填 第二个 占位 page 从0开始 所以每次＋1
    function pageselectCallback(page,jq){
        getDate(page+1,4);
    }

• 如果使用ajax获取total 则代码为（ 注：使用ajax一定要填写async: false,//不是异步加载, 让ajax为同步执行 ）

$(function() {
    // 初始化系统数据
    getDate(1,4);

    var total;
    $("#Pagination").pagination(total, {
        num_edge_entries: 1, //边缘页数
        num_display_entries: 4, //主体页数
        callback: pageselectCallback,
        items_per_page: 4, //每页显示个数
        prev_text: "前一页",
        next_text: "后一页"
    });		

    function pageselectCallback(page,jq){
        getDate(page+1,4);
    }

    function getDate(page,rows){
        $.ajax({
            type: "get",
            //url: "data/promotion.json"
            url: "/sales/queryPromotionByPage?page="+page+"&rows="+rows,
            async: false,//不是异步加载,让ajax先执行 
            dataType: "json",
            success: function(data) {
                $("#promotionresult").empty();
                total = data.totalCount;
                $.each(data.pageData, function(i, item) {
                    var str = '<div class="result col-md-3">';
                    //拼接对象展示
                    str += '<div class="thumbnail"></div>';
           
                });
            }
        });
    }


});

• 效果
  
  祝你幸福
  送你一首歌：张三的歌 蔡琴
  附图：江苏宿迁三台山衲田花海