jquery.pagination.js安装使用

  • 下载 jquery.pagination.js
  • 学习网站:文档
  • 百度云: 链接:https://pan.baidu/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>';
           
                });
            }
        });
    }


});
  • 效果

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

更多推荐

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