Bootstrap 重新数据查询时页码为当前页问题

记录一下使用前端组件Bootstrap遇到的一个小问题:

问题描述

第一次查询数据为5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,这时候页码没有重置成第一页,表格显示为未查询到数据。

解决办法

使用bootstrap table的参数刷新方法(refreshOptions),在查询按钮刷新table发出数据请求时,将页码刷新回到1。

代码示例

function ImpList_Init(){
	$('#ImpList_tb_order').bootstrapTable('refreshOptions',{pageNumber:1});
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用Bootstrap 3版本的分页插件,实现分页功能并且点击当前页码可以显示对应页面的数据的完整代码: HTML代码: ```html <div class="container"> <h2>分页示例</h2> <ul id="list" class="list-group"> <li class="list-group-item">数据1</li> <li class="list-group-item">数据2</li> <li class="list-group-item">数据3</li> <li class="list-group-item">数据4</li> <li class="list-group-item">数据5</li> <li class="list-group-item">数据6</li> <li class="list-group-item">数据7</li> <li class="list-group-item">数据8</li> <li class="list-group-item">数据9</li> <li class="list-group-item">数据10</li> </ul> <nav aria-label="Page navigation"> <ul id="pagination" class="pagination"> <li class="prev"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="next"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> </div> ``` CSS代码: ```css #pagination .prev.disabled a, #pagination .next.disabled a { pointer-events: none; cursor: default; color: #ccc; } ``` JS代码: ```js $(function() { var list = $("#list"), pagination = $("#pagination"), itemsPerPage = 4, currentPage = 1, totalItems = list.children().length, totalPages = Math.ceil(totalItems / itemsPerPage), prevButton = pagination.find(".prev"), nextButton = pagination.find(".next"); function showPage(page) { currentPage = page; list.children().hide(); var startIndex = (currentPage - 1) * itemsPerPage, endIndex = startIndex + itemsPerPage; list.children().slice(startIndex, endIndex).show(); pagination.children().removeClass("active"); pagination.children().eq(currentPage + 1).addClass("active"); if (currentPage === 0) { prevButton.addClass("disabled"); } else { prevButton.removeClass("disabled"); } if (currentPage === totalPages - 1) { nextButton.addClass("disabled"); } else { nextButton.removeClass("disabled"); } } function setupPagination() { pagination.empty(); prevButton = $("<li class=\"prev\"><a href=\"#\" aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>"); nextButton = $("<li class=\"next\"><a href=\"#\" aria-label=\"Next\"><span aria-hidden=\"true\">»</span></a></li>"); pagination.append(prevButton); for (var i = 0; i < totalPages; i++) { var pageLink = $("<li><a href=\"#\">" + (i + 1) + "</a></li>"); pageLink.on("click", function(e) { e.preventDefault(); showPage($(this).index() - 1); }); pagination.append(pageLink); } pagination.append(nextButton); pagination.children().first().addClass("disabled"); pagination.children().last().addClass("disabled"); prevButton.on("click", function(e) { e.preventDefault(); if (currentPage > 0) { showPage(currentPage - 1); } }); nextButton.on("click", function(e) { e.preventDefault(); if (currentPage < totalPages - 1) { showPage(currentPage + 1); } }); } showPage(0); setupPagination(); }); ``` 这段代码实现了在一个ul元素中展示数据,并使用Bootstrap 3版本的分页插件来实现分页功能。默认展示四条数据,每页展示四条数据。点击每个页码可以显示对应页面的数据。左右箭头可以点击切换上一页下一页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃八顿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值