Blade分页自定义：data-page从0开始、标签从1起始的jQuery实现

嘿，刚好我之前做项目时也碰到过一模一样的需求——后台分页逻辑用0起始的索引，但前端要给用户看1开始的自然页码。针对你提供的bladePagination jQuery插件，只需要调整生成页码标签的部分就行，具体改法如下：

核心修改思路 #

我们要让**data-page属性保留0、1、2...的索引值**，但按钮上显示的文本改成索引+1（也就是1、2、3...），只需要在生成分页按钮的循环里做个简单的数值转换。

具体代码调整 #

找到你脚本里createPagin函数中生成页码项的循环部分（通常是遍历页码索引的代码块），把原来直接输出索引值的地方改成索引+1：

假设原代码是这样的：

// 原生成页码项的代码（示例）
for(var i = 0; i < settings.totalPages; i++){
    var pageLink = $('<a href="#" data-page="' + i + '">' + i + '</a>');
    var pageItem = $('<li></li>').append(pageLink);
    // ...其他逻辑（比如添加active类、绑定点击事件）
    jqPagination.find('.slice-pagination-list').append(pageItem);
}

修改成：

// 修改后的代码
for(var i = 0; i < settings.totalPages; i++){
    // data-page保留原索引i（0、1、2...），显示文本改成i+1（1、2、3...）
    var pageLink = $('<a href="#" data-page="' + i + '">' + (i + 1) + '</a>');
    var pageItem = $('<li></li>').append(pageLink);
    
    // 处理当前页的active状态时，也要对应显示正确的文本
    if(i === settings.currentPage){
        pageItem.addClass('active');
    }
    
    // ...其他绑定事件的逻辑不变
    jqPagination.find('.slice-pagination-list').append(pageItem);
}

额外注意点 #

• 如果你的插件里有“首页”“末页”的快捷按钮，不需要改它们的显示文本，只需要确保它们对应的data-page分别是0和totalPages - 1就行。
• 点击分页按钮后的逻辑不用改，因为data-page还是传递的0起始索引，和后台分页逻辑匹配。

这样改完之后，前端显示的页码就是1、2、3...，但实际传给后台的分页参数还是0、1、2...，完美匹配你的需求～

内容的提问来源于stack exchange，提问作者Ashok Charu