jQuery 分页显示一页内容有两个翻页按钮

Question

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

这不是我想要的； link 到第 1 页应该只显示一次。

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

这是 table 和按钮

的代码

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 循环中的逻辑问题造成的。你有几个条件可以写一个按钮：

如果按钮是第一个页面；即，
```
i == 1
```
如果按钮是最后页；即，
```
i == res.last_page
```

如果按钮紧接在当前页之前或之后，但不是第一页或最后一页；即，

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

关键问题是前两个是非独占；即，当你只有一个页面时，你的按钮可以同时代表 both first page 以及最后页。因此，完全可以预期您会在那种情况下看到两个按钮。

解决排他性问题

只需将第二个条件的逻辑从 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>';
    }
}

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

jQuery 分页显示一页内容有两个翻页按钮

jQuery Pagination shows two page buttons for one page of content

javascript

jquery

pagination

jquery-pagination

解决排他性问题

巩固逻辑

重构`for`循环

jQuery 分页显示一页内容有两个翻页按钮

jQuery Pagination shows two page buttons for one page of content

javascript

jquery

pagination

jquery-pagination

解决排他性问题

巩固逻辑

重构for循环

重构`for`循环