jQuery 分页显示一页内容的两个页面按钮

Question

我使用一个表来显示我的数据库中的值，我使用 JQuery 进行分页。 这是整体工作。 但是，当结果只有一页时，分页显示：

这不是我想要的； 指向第 1 页的链接应该只显示一次。

当它显示更多页面的数据时，它工作正常：

这是表格和按钮的代码

function getProducts() {
    $.get('/get-products', parameters).then(res => {
        console.log(res);
        let products = res.data;
        preview = res.current_page > 1 ? true : false;
        next = res.current_page < res.last_page ? true : false;
        preview ? $('#previous').removeAttr("disabled") : $('#previous').attr('disabled', 'disabled');
        next ? $('#next').removeAttr("disabled") : $('#next').attr('disabled', 'disabled');
        let table_body = $('#tbody');
        table_body.empty();
        var html = '';
        $.each(products, function(index, val) {
            html += "<tr> " +
                "<td>" + val.name + "</td>" +
                "<td>" + val.quantity + "</td>" +
                "<td>" + val.price +"<p> Lei </p>"+"</td>" +
                "<td>" + val.status.name + "</td>" +
                "<td>" + val.description + "</td>" +
                "<td>" + val.technics + "</td>" +
                "<td>" + "<a class='btn btn-warning' href='/editareprodus/"+ val.id +"'>Edit</a>" + "</td>" +
                "<td>" + "<a class='btn btn-danger' onclick=deleteItem("+ val.id +")>Delete</a>" + "</td>" +
            "</tr>";
        });
        table_body.append(html);
        $('.page_button').remove();
        var buttons = '';
        for(var i = 1; i < res.last_page+1; i++) {
            if(i == 1) {
                if(i == res.current_page) {
                    buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                } else{
                    buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                }
            }
            if(i == res.last_page) {
                if(i == res.current_page) {
                    buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                } else{
                    buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                }
            }
            if(i == res.current_page-2 && res.current_page-2 >= 2 ) {
                buttons += '<span class="page_button">...</span>';
            }
            if(i == res.current_page+2 && res.current_page+2 < res.last_page) {
                buttons += '<span class="page_button">...</span>';
            }
            if((i != 1 && i != res.last_page) && (i == res.current_page-1 || i == res.current_page || i == res.current_page+1)) {
                if(i == res.current_page) {
                    buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                } else {
                    buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
                }
            }
        }
        $('#previous').after(buttons)
    });
}

我将添加上一页和下一页按钮的代码，以便您可以看到它们，但这些工作正常：

function previewPage() {
    if(preview) {
        parameters.page--;
        getProducts();
    }
}

function nextPage() {
    if(next) {
        parameters.page++;
        getProducts();
    }
}

function setPageParameter(page) {
    this.parameters.page = page;
    getProducts();
}

当我有一页而不是现在发生的两个按钮时，如何更改代码以显示一个页面按钮？

Answer 1

问题是由于for循环中的逻辑存在问题。 您有几种可以编写按钮的条件：

• 如果按钮是第一页； IE，

   i == 1

• 如果按钮是最后一页； IE，

   i == res.last_page

• 如果按钮在当前页面之前或之后，而不是第一页或最后一页； IE，

   (i != 1 && i != res.last_page) && (i == res.current_page-1 || i == res.current_page || i == res.current_page+1)

关键问题是前两个是非排他性的； 也就是说，当你只有一个页面，你的按钮可以同时代表双方在第一页和最后一页。 因此，完全可以预期您会在该场景中看到两个按钮。

解决排他性

这可以通过简单地将第二个条件的逻辑从if更改为else if来轻松解决； 例如，

if (i == 1) 
{
    if (i == res.current_page) {
      buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    } 
    else
    {
        buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    }
}
else if (i == res.last_page) // Only show if not also the first button
{
    if (i == res.current_page)
    {
        buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    } 
    else
    {
        buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    }
}       

整合逻辑

以上解决了您的核心问题，但由于它们生成完全相同的标记，您不妨使用||它们折叠为单个条件运算符，从而在合并代码的同时保持相同的结果：

if (i == 1 || i == res.last_page) 
{
    if (i == res.current_page)
    {
        buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    } 
    else
    {
        buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    }
}

重构for循环

这远远超出了您原始问题的范围，但即使在巩固了先前的条件之后，仍有清理的空间。 这是因为，目前，您在函数中重复了大量标记。

作为开发人员，您应该努力不重复代码。 为什么？ 因为除了让代码变长之外，还可以更容易地引入 bug。 例如，如果您决定更改按钮的样式，则需要在四个地方更改它们。 在这种情况下很容易无意中忽略一个，引入不一致。

鉴于此，您应该能够进一步巩固您的逻辑，如下所示：

for (var i = 1; i < res.last_page + 1; i++) {
    if (i == 1 || i == res.last_page || i == res.current_page - 1 || i == res.current_page || i == res.current_page + 1) {
        buttons += '<span class="page_button">...</span>';
    }
    else if (
        (i == res.current_page - 2 && res.current_page - 2 >= 2) ||
        (i == res.current_page + 2 && res.current_page + 2 < res.last_page)
    ) {
        buttons += '<button type="button" class="btn btn-"' + (i == res.current_page? "danger" : "primary") + '" page_button" onclick="setPageParameter(' + i + ')">' + i + '</button>';
    }
}

这个逻辑可以稍微简化一点，但为了一致性和可读性，我保留了你的原始表达式，同时重构它们以避免标记重复。 这不仅解决了原始问题，而且导致代码块更短。