bootstarp页面分页操作

最新推荐文章于 2023-10-21 17:50:18 发布

原创最新推荐文章于 2023-10-21 17:50:18 发布 · 921 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种利用JQuery实现网页分页显示的方法。通过遍历数据并结合页面显示需求，有效地实现了分页功能。文章详细展示了如何通过移除不必要的DOM元素来保持页面整洁，并提供了具体的AJAX请求及数据处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面上实现分页操作，最主要的操作就是在前台获取到大量数据时，在使用JQuery进行遍历操作时，首先需要把对进行分页显示的标签进行移除处理，
防止在页面分页时出现累赘现象，具体操作方法为：现象
$("#ul").find("li").removed();//这样就可以移除ul标签下面的所以li标签，防止在进行分页操作时不清屏现象。
Jquery遍历分页操作代码为：
rowindex>=(pageNumber-1)*pagesize&&rowindex<=(pageNumber*pagesize-1)://这句话就可以实现分页操作
具体代码如下所示：
//定义为全局变量
   var pageSize=6;//每页显示的数目
   var pageNumber;//第几页
   function pre() {
var page=pageNumber-1;
ExampaperInit(page);
}
function next() {
       var page=pageNumber+1;
       ExampaperInit(page);
}
   function ExampaperInit(page){//初始化数据的显示方法
   pageNumber=page;
$("#zqcp_exampaper_tip").find("li").remove();//进行清屏处理
$.ajax({
url:'/qualtitytest/GetStudentZqcpExampaper',
type:"post",
success:function (data) {
if (data) {
$.each(data.StudentTestList,function (rowindex,rowvalue) {
if(rowindex>=(pageNumber-1)*pageSize&&rowindex<=(pageSize*pageNumber-1)) {//进行分页处理
var examState;
var html;
if (rowvalue.p_flag == 1) {
examState = "正常";
}
else if (rowvalue.p_flag == 2) {
examState = "结束"
}
html = "<li style='margin-left: 55px'><div id=\"test_wall1\"><div id=\"test_name_label\"><label>" + rowvalue.p_name + "</label></div>" +
" <div id=\"start_block\"><div id=\"start_time_label\"><label>发布时间：</label></div>" +
" <div id=\"start_time\"><label>" + rowvalue.createtime + "</label></div></div><div id=\"end_block\"><div id=\"end_time_label\">" +
" <label>试卷状态：</label></div><div id=\"end_time\"><label>" + examState + "</label></div></div><div id=\"execution_block\">" +
"<div id=\"execution_label\"><label>完成情况：</label></div><div id=\"execution\"><label>未完成</label></div></div>" +
" <div id=\"btn_block\"><a href='/qualtitytest/answerhtml?id=" + rowvalue.id + "' class=\"btn btn-warning\">开始测试</a></div></div></li>";
$.each(data.StudentAnswerList, function (answerindex, answervalue) {
if (answervalue.exam_id == rowvalue.id) {
html = " <li style='margin-left: 55px'><div id=\"test_wall1\"><div id=\"test_name_label\"><label>" + rowvalue.p_name + "</label></div>" +
" <div id=\"start_block\"><div id=\"start_time_label\"><label>发布时间：</label></div>" +
" <div id=\"start_time\"><label>" + rowvalue.createtime + "</label></div></div><div id=\"end_block\"><div id=\"end_time_label\">" +
" <label>试卷状态：</label></div><div id=\"end_time\"><label>" + examState + "</label></div></div><div id=\"execution_block\">" +
"<div id=\"execution_label\"><label>完成情况：</label></div><div id=\"execution\"><label>已完成</label></div></div>" +
" <div id=\"btn_block\"><span style='font-size: 20px;color: red;font-weight: bold;padding: 5px'>测试得分：" + answervalue.test_score + "</span></div></div></li>";
}
});
$('#zqcp_exampaper_tip').append(html);
}
})
}
},
error:function () {
alert("出错了，请联系管理员！");
}
})
   }
   $(function () {
ExampaperInit(1);//页面加载完调用初始化试卷方法取值。
});
这样的话bootstarp分页栏目就可以通过调用初始化函数，填入相关的页数实现分页操作功能。