以下是一个使用ASP.NET和Bootstrap 4的分页示例代码:
首先,确保你的项目中已经引用了Bootstrap 4的CSS和JavaScript文件。
在你的ASP.NET页面中添加一个用于显示分页的HTML元素,例如一个div元素:
int totalRecords = GetTotalRecords(); // 获取数据总数
int pageSize = 10; // 每页显示的数据数量
int totalPages = (int)Math.Ceiling((double)totalRecords / pageSize); // 计算总页数
function generatePagination(totalPages) {
var pagination = $('#pagination');
pagination.empty(); // 清空分页控件
// 添加“上一页”按钮
pagination.append('上一页 ');
// 添加数字页码按钮
for (var i = 1; i <= totalPages; i++) {
pagination.append('' + i + ' ');
}
// 添加“下一页”按钮
pagination.append('下一页 ');
// 添加事件处理程序
pagination.find('li').not('#prev, #next').on('click', function() {
var pageNo = $(this).attr('id');
// 处理页码点击事件,例如发送AJAX请求获取对应页码的数据并更新页面
getData(pageNo);
});
// 添加“上一页”按钮的事件处理程序
pagination.find('#prev').on('click', function() {
var currentPage = pagination.find('.active').attr('id');
if (currentPage > 1) {
var pageNo = parseInt(currentPage) - 1;
// 处理页码点击事件
getData(pageNo);
}
});
// 添加“下一页”按钮的事件处理程序
pagination.find('#next').on('click', function() {
var currentPage = pagination.find('.active').attr('id');
if (currentPage < totalPages) {
var pageNo = parseInt(currentPage) + 1;
// 处理页码点击事件
getData(pageNo);
}
});
}
// 初始化分页控件
generatePagination(totalPages);
以上就是使用ASP.NET和Bootstrap 4实现分页的一个示例。你可以根据自己的需求进行修改和扩展。