BootStrap分页功能的实现
注意项目中要先添加bootstrap相关文件
分页功能我们使用bootstrap自带的插件，下面举个例子
paginationtest.jsp文件
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <% 3 String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; 4 %> 5 <html> 6 <head> 7 <base href="<%=basePath%>"> 8 <!-- JQUERY --> 9 <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script> 10 11 <!-- BOOTSTRAP --> 12 <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"> 13 <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script> 14 15 <!-- PAGINATION plugin --> 16 <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css"> 17 <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script> 18 <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script> 19 <title>演示bs_pagination插件的使用</title> 20 <script type="text/javascript"> 21 $(function() { 22 23 $("#demo_pag1").bs_pagination({ 24 currentPage:1,//当前页号,相当于pageNo 25 26 rowsPerPage:10,//每页显示条数,相当于pageSize 27 totalRows:1000,//总条数 28 totalPages: 100, //总页数,必填参数. 29 30 visiblePageLinks:5,//最多可以显示的卡片数 31 32 showGoToPage:true,//是否显示"跳转到"部分,默认true--显示 33 showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示 34 showRowsInfo:true,//是否显示记录的信息，默认true--显示 35 36 //用户每次切换页号，都自动触发本函数; 37 //每次返回切换页号之后的pageNo和pageSize 38 onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked 39 //js代码 40 alert(pageObj.currentPage); 41 alert(pageObj.rowsPerPage); 42 } 43 }); 44 45 }); 46 </script> 47 </head> 48 <body> 49 <!-- Just create a div and give it an ID --> 50 51 <div id="demo_pag1"></div> 52 </body> 53 </html>
下面展示用在查询上具体的分页功能
分析：
1,queryActivityByConditionForPage(1,10)
|->把pageNo,pageSize和查询条件一起发送到后台，查询数据
|->data
|->activityList：遍历list，显示列表
|->totalRows:调用工具函数，显示翻页信息
2,当用户切换页号或者每页显示条数时：pageNo,pageSize
|->翻页信息会自动变化
|->手动刷新列表：
|->把pageNo,pageSize和查询条件一起发送到后台，查询数据
|->data
|->activityList：遍历list，显示列表
|->totalRows:调用工具函数，显示翻页信息
index.jsp文件
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 <% 4 String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; 5 %> 6 <html> 7 <head> 8 <base href="<%=basePath%>"> 9 <meta charset="UTF-8"> 10 <%--这里是引用相关的css与js文件，注意要按照顺序进行引入--%> 11 <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 12 <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> 13 <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css"> 14 15 <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script> 16 <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script> 17 <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script> 18 <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script> 19 <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script> 20 <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script> 21 <script type="text/javascript"> 22 23 $(function(){ 24 //给"创建"按钮添加单击事件，创建活动，每次创建都会将生成的数据插入到主体当中。 25 $("#createActivityBtn").click(function () { 26 //初始化工作 27 //重置表单 28 $("#createActivityForm").get(0).reset(); 29 30 //弹出创建市场活动的模态窗口 31 $("#createActivityModal").modal("show"); 32 }); 33 34 //给"保存"按钮添加单击事件 35 $("#saveCreateActivityBtn").click(function () { 36 //收集参数 37 var owner=$("#create-marketActivityOwner").val(); 38 var name=$.trim($("#create-marketActivityName").val()); 39 var startDate=$("#create-startDate").val(); 40 var endDate=$("#create-endDate").val(); 41 var cost=$.trim($("#create-cost").val()); 42 var description=$.trim($("#create-description").val()); 43 //表单验证 44 if(owner==""){ 45 alert("所有者不能为空"); 46 return; 47 } 48 if(name==""){ 49 alert("名称不能为空"); 50 return; 51 } 52 if(startDate!=""&&endDate!=""){ 53 //使用字符串的大小代替日期的大小 54 if(endDate<startDate){ 55 alert("结束日期不能比开始日期小"); 56 return; 57 } 58 } 59 /* 60 正则表达式： 61 1，语言，语法：定义字符串的匹配模式，可以用来判断指定的具体字符串是否符合匹配模式。 62 2,语法通则： 63 1)//:在js中定义一个正则表达式. var regExp=/...../; 64 2)^：匹配字符串的开头位置 65 $: 匹配字符串的结尾 66 3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/; 67 var regExp=/^[a-z0-9]$/; 68 4){}:匹配次数.var regExp=/^[abc]{5}$/; 69 {m}:匹配m此 70 {m,n}：匹配m次到n次 71 {m,}：匹配m次或者更多次 72 5)特殊符号： 73 \d:匹配一位数字，相当于[0-9] 74 \D:匹配一位非数字 75 \w：匹配所有字符，包括字母、数字、下划线。 76 \W:匹配非字符，除了字母、数字、下划线之外的字符。 77 78 *:匹配0次或者多次，相当于{0,} 79 +:匹配1次或者多次，相当于{1,} 80 ?:匹配0次或者1次，相当于{0,1} 81 */ 82 var regExp=/^(([1-9]\d*)|0)$/; 83 if(!regExp.test(cost)){ 84 alert("成本只能为非负整数"); 85 return; 86 } 87 //发送请求 88 $.ajax({ 89 url:'work/activity/saveCreateActivity', 90 data:{ 91 owner:owner, 92 name:name, 93 startDate:startDate, 94 endDate:endDate, 95 cost:cost, 96 description:description 97 }, 98 type:'post', 99 dataType:'json', 100 success:function (data) { 101 if(data.code=="1"){ 102 //关闭模态窗口 103 $("#createActivityModal").modal("hide"); 104 //刷新市场活动列，显示第一页数据，保持每页显示条数不变 105 queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')); 106 }else{ 107 //提示信息 108 alert(data.message); 109 //模态窗口不关闭 110 $("#createActivityModal").modal("show");//可以不写。 111 } 112 } 113 }); 114 }); 115 116 //当容器加载完成之后，对容器调用工具函数，这里是时间插件，给创建中时间选项进行输入 117 //$("input[name='mydate']").datetimepicker({ 118 $(".mydate").datetimepicker({ 119 language:'zh-CN', //语言 120 format:'yyyy-mm-dd',//日期的格式 121 minView:'month', //可以选择的最小视图 122 initialDate:new Date(),//初始化显示的日期 123 autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历 124 todayBtn:true,//设置是否显示"今天"按钮,默认是false 125 clearBtn:true//设置是否显示"清空"按钮，默认是false 126 }); 127 128 //当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示10条 129 //当用户点击活动主页面的时候将参数，pageNo与pageSize传给该函数 130 //默认显示第一页，每页10条 131 queryActivityByConditionForPage(1,10); 132 133 //给"查询"按钮添加单击事件 134 $("#queryActivityBtn").click(function () { 135 //查询所有符合条件数据的第一页以及所有符合条件数据的总条数; 136 queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')); 137 }); 138 139 140 }); 141 142 function queryActivityByConditionForPage(pageNo,pageSize) { 143 //收集参数 144 var name=$("#query-name").val(); 145 var owner=$("#query-owner").val(); 146 var startDate=$("#query-startDate").val(); 147 var endDate=$("#query-endDate").val(); 148 //var pageNo=1; 149 //var pageSize=10; 150 //发送请求 151 $.ajax({ 152 url:'work/activity/queryActivityByConditionForPage', 153 data:{ 154 name:name, 155 owner:owner, 156 startDate:startDate, 157 endDate:endDate, 158 pageNo:pageNo, 159 pageSize:pageSize 160 }, 161 type:'post', 162 dataType:'json', 163 success:function (data) { 164 //显示市场活动的列表 165 //遍历activityList，拼接所有行数据 166 var htmlStr=""; 167 $.each(data.activityList,function (index,obj) { 168 htmlStr+="<tr class=\"active\">"; 169 htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>"; 170 htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>"; 171 htmlStr+="<td>"+obj.owner+"</td>"; 172 htmlStr+="<td>"+obj.startDate+"</td>"; 173 htmlStr+="<td>"+obj.endDate+"</td>"; 174 htmlStr+="</tr>"; 175 }); 176 $("#tBody").html(htmlStr); 177 178 //计算总页数 179 var totalPages=1; 180 if(data.totalRows%pageSize==0){ 181 totalPages=data.totalRows/pageSize; 182 }else{ 183 totalPages=parseInt(data.totalRows/pageSize)+1; 184 } 185 186 //对容器调用bs_pagination工具函数，显示翻页信息 187 $("#demo_pag1").bs_pagination({ 188 currentPage:pageNo,//当前页号,相当于pageNo 189 190 rowsPerPage:pageSize,//每页显示条数,相当于pageSize 191 totalRows:data.totalRows,//总条数 192 totalPages: totalPages, //总页数,必填参数. 193 194 visiblePageLinks:5,//最多可以显示的卡片数 195 196 showGoToPage:true,//是否显示"跳转到"部分,默认true--显示 197 showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示 198 showRowsInfo:true,//是否显示记录的信息，默认true--显示 199 200 //用户每次切换页号，都自动触发本函数; 201 //每次返回切换页号之后的pageNo和pageSize 202 onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked 203 204 queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage); 205 } 206 }); 207 } 208 }); 209 } 210 </script> 211 </head> 212 <body> 213 214 <!-- 创建市场活动的模态窗口 --> 215 <div class="modal fade" id="createActivityModal" role="dialog"> 216 <div class="modal-dialog" role="document" style="width: 85%;"> 217 <div class="modal-content"> 218 <div class="modal-header"> 219 <button type="button" class="close" data-dismiss="modal"> 220 <span aria-hidden="true">×</span> 221 </button> 222 <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4> 223 </div> 224 <div class="modal-body"> 225 226 <form id="createActivityForm" class="form-horizontal" role="form"> 227 228 <div class="form-group"> 229 <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label> 230 <div class="col-sm-10" style="width: 300px;"> 231 <select class="form-control" id="create-marketActivityOwner"> 232 <c:forEach items="${userList}" var="u"> 233 <option value="${u.id}">${u.name}</option> 234 </c:forEach> 235 </select> 236 </div> 237 <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label> 238 <div class="col-sm-10" style="width: 300px;"> 239 <input type="text" class="form-control" id="create-marketActivityName"> 240 </div> 241 </div> 242 243 <div class="form-group"> 244 <label for="create-startDate" class="col-sm-2 control-label">开始日期</label> 245 <div class="col-sm-10" style="width: 300px;"> 246 <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly> 247 </div> 248 <label for="create-endDate" class="col-sm-2 control-label">结束日期</label> 249 <div class="col-sm-10" style="width: 300px;"> 250 <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly> 251 </div> 252 </div> 253 <div class="form-group"> 254 255 <label for="create-cost" class="col-sm-2 control-label">成本</label> 256 <div class="col-sm-10" style="width: 300px;"> 257 <input type="text" class="form-control" id="create-cost"> 258 </div> 259 </div> 260 <div class="form-group"> 261 <label for="create-description" class="col-sm-2 control-label">描述</label> 262 <div class="col-sm-10" style="width: 81%;"> 263 <textarea class="form-control" rows="3" id="create-description"></textarea> 264 </div> 265 </div> 266 267 </form> 268 269 </div> 270 <div class="modal-footer"> 271 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 272 <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button> 273 </div> 274 </div> 275 </div> 276 </div> 277 278 279 <div> 280 <div style="position: relative; left: 10px; top: -10px;"> 281 <div class="page-header"> 282 <h3>市场活动列表</h3> 283 </div> 284 </div> 285 </div> 286 287 288 <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;"> 289 <div style="width: 100%; position: absolute;top: 5px; left: 10px;"> 290 291 <div class="btn-toolbar" role="toolbar" style="height: 80px;"> 292 <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;"> 293 294 <div class="form-group"> 295 <div class="input-group"> 296 <div class="input-group-addon">名称</div> 297 <input class="form-control" type="text" id="query-name"> 298 </div> 299 </div> 300 301 <div class="form-group"> 302 <div class="input-group"> 303 <div class="input-group-addon">所有者</div> 304 <input class="form-control" type="text" id="query-owner"> 305 </div> 306 </div> 307 308 <div class="form-group"> 309 <div class="input-group"> 310 <div class="input-group-addon">开始日期</div> 311 <input class="form-control" type="text" id="query-startDate" /> 312 </div> 313 </div> 314 <div class="form-group"> 315 <div class="input-group"> 316 <div class="input-group-addon">结束日期</div> 317 <input class="form-control" type="text" id="query-endDate"> 318 </div> 319 </div> 320 321 <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button> 322 </form> 323 </div> 324 325 <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;"> 326 <div class="btn-group" style="position: relative; top: 18%;"> 327 <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button> 328 <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button> 329 <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button> 330 </div> 331 <div class="btn-group" style="position: relative; top: 18%;"> 332 <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button> 333 <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button> 334 <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button> 335 </div> 336 </div> 337 <div style="position: relative;top: 10px;"> 338 <table class="table table-hover"> 339 <thead> 340 <tr style="color: #B3B3B3;"> 341 <td><input type="checkbox" id="chckAll"/></td> 342 <td>名称</td> 343 <td>所有者</td> 344 <td>开始日期</td> 345 <td>结束日期</td> 346 </tr> 347 </thead> 348 <tbody id="tBody"> 349 //这里进行数据从上面拼接得到 350 </tbody> 351 </table> 352 //这里使用一个div去实现分页插件显示 353 <div id="demo_pag1"></div> 354 </div> 355 356 </div> 357 358 </div> 359 </body> 360 </html>
浙公网安备 33010602011771号