简单的分页jquery总是有10行

Question

var items;
var perPage = 10;

// now setup pagination
var $pagination = $("#searchresult");
$pagination.pagination({
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) { // this is where the magic happens
        // someone changed page, lets hide/show trs appropriately
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide() // first hide everything, then show for the new page
            .slice(showFrom, showTo).show();

    }
});
function updateItems() {
    items = $(".paginate");

    // we'll update the number of items that the pagination element expects
    // using a method from the simplePagination documentation: updateItems
    $pagination.pagination("updateItems", items.length);
    // next we'll re-select the page so the onPageClick function we already
    // programmed will handle hiding and showing the correct content for us

    // note that the page we were on before may no longer exist (i.e. if
    // elements were removed and that page is no longer required), so we
    // will make sure to select an existing page
    var page = Math.min(
        $pagination.pagination("getCurrentPage"),
        $pagination.pagination("getPagesCount")
    );

    $pagination.pagination("selectPage", page);

    var tablerow = $("#searchresult").find("tr:gt(0)").length;
    if (tablerow < 10) {
        for (var i = tablerow; i < 10; i++) {
            var tr = $('<tr/>');
            tr.append("<td id=''></td>");
            tr.append("<td id=''></td>");
            tr.append("<td id=''></td>");
            tr.append("<td id=''></td>");
            tr.append("<td id=''></td>");
            tr.append("<td id=''></td>");

            $("#searchresult").append(tr);
        }
    }

}

success ajax response

success: function(data) {
    var tr;
    $("#searchresult").find("tr:gt(0)").remove();
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr class="paginate"/>');
        tr.append("<td id=''>" + data[i].sid + "</td>");
        tr.append("<td ><span id='" + data[i].id1 + "'>" + data[i].name1 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id2 + "'>" + data[i].name2 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id3 + "'>" + data[i].name3 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id4 + "'>" + data[i].name4 + "</span></td>");
        tr.append("<td id=''>" + "<a class=\"searchresult\"  href='#' >View Details</a>" + "</td>");
        $("#searchresult").append(tr);
    }
    updateItems();
},

我正在这样做pagination。我想以某种方式使表格无论如何都有 10 行。例如，项目计数是 26 第 1 页和第 2 页都可以，因为它们都有 10 个项目，但第 3 页只有 6 个项目。我想将 4 个空白项目附加到第 3 页以使其成为 10 个项目。

我尝试的是根据表行数追加行。但我无法获得页面的当前行数，我总是得到的项目长度是总项目数，即 26。

任何想法都值得赞赏

Answer 1

在您的成功函数中，将空结果作为空白播种。为确保添加偶数组 10，将长度修改为 10 并添加直到为 0（或可被 10 整除）

success: function(data) {

    //insert blanks to fill in blank spaces up to an even multiple of 10
    while(data.length % 10 != 0) data.push({ 
        sid: "", id1: "", name1: "", id2: "", name2: "", 
        id3: "", name3: "", id4: "", name4: ""
    });

    var tr;
    $("#searchresult").find("tr:gt(0)").remove();
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr class="paginate"/>');
        tr.append("<td id=''>" + data[i].sid + "</td>");
        tr.append("<td ><span id='" + data[i].id1 + "'>" + data[i].name1 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id2 + "'>" + data[i].name2 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id3 + "'>" + data[i].name3 + "</span></td>");
        tr.append("<td ><span id='" + data[i].id4 + "'>" + data[i].name4 + "</span></td>");
        tr.append("<td id=''>" + "<a class=\"searchresult\"  href='#' >View Details</a>" + "</td>");
        $("#searchresult").append(tr);
    }
    updateItems();
},