jq简单分页实现

// 分页处理
datatable.pagelink($("#datalist tfoot"), rs.pagination, 12);

//点击分页功能
$(document).off("click", "li.page-link-item").on("click", "li.page-link-item", function() {
    //click
    if (datatable.clickOther(_data, $(this))) {
        //loading...
        datatable.loading($thisTbody);
        findlist();
    }
});

//跳转页面
$(document).off("blur", ".gp-input").on("blur", ".gp-input", function(e) {
    //input
    if (datatable.inputPage(_data, $(this))) {
        //loading...
        datatable.loading($thisTbody);
        findlist();
    }
});

//改变显示数量
$(document).off("change", ".pagesize").on('change', '.pagesize', function() {
    //change pageSize
    if (datatable.changePageSize(_data, $(this))) {
        //loading...
        datatable.loading($thisTbody);
        findlist();
    }
});
//分页显示
exports.pagelink = function(elobj, config, columnsNumber, pageSizeHide) {

    if (config && config.total_rows > 0) {

        oldPage = config.pageNumber;
        oldPageSize = config.pageSize;

        //分页wrap
        var pageStr = "<tr>";

        //左侧分页
        pageStr += '<td colspan="' + Math.round(columnsNumber / 2) + '" class="pagination-left form-inline">';
        pageStr += '<div class="goto-page form-group">' + '跳转至第<input type="text" name="" id="" class="form-control gp-input" value="' + (config.pageNumber + 1) + '">' + "</div>" + '<div class="change-size form-group">';
        pageStr += pageSizeHide ? "" : '<select name="" id="" class="pagesize form-control">' + '<option value="10" ' + (config.pageSize == 10 ? "selected" : "") + " >10</option>" + '<option value="20" ' + (config.pageSize == 20 ? "selected" : "") + ">20</option>" + '<option value="30" ' + (config.pageSize == 30 ? "selected" : "") + ">30</option>" + "</select>";
        pageStr += "</div>" + '<div class="table-info form-group">此页显示' + config.pageSize + "条  共<span class='sum-pages'>" + config.total_rows + "</span></div></td>";

        //右侧分页
        pageStr += '<td colspan="' + Math.round(columnsNumber / 2) + '" class="pagination-right"><ul class="page-link-list">';
        //加上一页
        pageStr += '<li class="page-link-item">上一页</li>';
        var pagecount = parseInt(config.total_rows / config.pageSize) + (config.total_rows % config.pageSize > 0 ? 1 : 0); //字符串拼接分页

        //判断页码
        if (pagecount < 5) { //小于5            for (var i = 0; i < pagecount; i++) {
                pageStr += '<li class="page-link-item  ' + (i == 0 ? "first-page" : i == pagecount - 1 ? "last-page" : "") + " " + (config.pageNumber === i ? "curr" : "") + '">' + (i + 1) + "</li>";
            }
        } else { //大于5
            //判断当前页码
            if (config.pageNumber < 2) {

                //当前页在前3位中
                for (var i = 0; i < 3; i++) {
                    pageStr += '<li class="page-link-item  ' + (i == 0 ? 'first-page' : '') + ' ' + (config.pageNumber === i ? "curr" : "") + '">' + (i + 1) + "</li>";
                }
                pageStr += '<li class="ellipsis">...</li>'; //省略号
                pageStr += '<li class="page-link-item last-page ' + (config.pageNumber === pagecount ? "curr" : "") + '">' + pagecount + "</li>";

            } else if (config.pageNumber > pagecount - 3) {

                //当前页在后3位中
                pageStr += '<li class="page-link-item first-page ' + (config.pageNumber === 1 ? "curr" : "") + '">' + 1 + "</li>"; //第一页
                pageStr += '<li class="ellipsis">...</li>'; //省略号
                for (var i = pagecount - 3; i < pagecount; i++) {
                    pageStr += '<li class="page-link-item ' + (i == pagecount - 1 ? 'last-page' : '') + ' ' + (config.pageNumber === i ? "curr" : "") + '">' + (i + 1) + "</li>";
                }
            } else {
                //当前页在中间
                pageStr += '<li class="page-link-item first-page ' + (config.pageNumber === 1 ? "curr" : "") + '">' + 1 + "</li>"; //第一页
                pageStr += config.pageNumber === 2 ? '' : '<li class="ellipsis">...</li>'; //省略号
                for (var i = (config.pageNumber - 1); i < (config.pageNumber + 2); i++) {
                    pageStr += '<li class="page-link-item ' + (config.pageNumber === i ? "curr" : "") + '">' + (i + 1) + "</li>";
                }
                pageStr += config.pageNumber === (pagecount - 3) ? '' : '<li class="ellipsis">...</li>'; //省略号
                pageStr += '<li class="page-link-item last-page ' + (config.pageNumber === pagecount ? "curr" : "") + '">' + pagecount + "</li>"; //最后一页
            }
        }

        //加下一页
        pageStr += '<li class="page-link-item">下一页</li>';
        pageStr += "</ul></td></tr>";

        oldPage = config.pageNumber;

        elobj.html(pageStr);
    } else {
        elobj.html("");
    }

};

猜你喜欢

转载自blog.csdn.net/zerocher/article/details/80512569