关闭

57-005-2 bootstrap实现分页显示

323人阅读 评论(0) 收藏 举报
分类:
2.1 本次开发将在IDEA工具下使用AJAX来取回数据,最终需要实现的效果图

 

2.2 新建一个页面
    news_list.htm
<html>
<head>
 <title>Bootstrap 开发</title>
 <meta charset="UTF-8">
 <!-- bootstrap3.x 开始支持移动设备,所以可以加上其相应选项-->
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <!-- 导入bootstrap所需要的配置文件-->
 <!-- bootstrap需要jquery的支持,导入jquery-->
  <script type="text/javascript" src="js/jquery.min.js"></script>
 <!-- 导入bootstrap自己定出的js组件-->
 <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 <!-- 导入bootstrap自定义的基础样式css-->
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <!-- 导入自定义的文件 -->
    <script src="js/news_list.js" type="text/javascript"></script>
</head>
<!-- 在body元素上面加上一个滚动监听,只要body元素有变动,即只要页面有动静,则会触发
,其关联的目标对象为myScrollSpy
-->
<body>
<!--首先定义导航条-->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <!--inverse使导航条的颜色背景为黑色主题-->
           <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
               <div class="navbar-header">
                   <a class="navbar-brand" href="http://www.baidu.com">baidu</a>
               </div>
               <!--实现bootstrap折叠显示-->
               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-home"> 首页</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-folder-open"> 课程</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-comment"> 评论</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-list"> 用户</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-user"> 管理员</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-file"> 新闻</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-cog"> 设置</span></a></li>
                   </ul>
            </div>
      </nav>
     </div>
    <div class="row" style="margin-top:100px">
     <div class="col-md-2">
      <!-- bootstrap对ul列表项实现一个堆栈式的列表导航 -->
      <ul class="nav nav-pills nav-stacked">
       <!-- tabindex=-1 表示按下键盘上的tab键时,光标不会移到当前的元素上 -->
       <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
       <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
       <li class="active" ><a tabindex="-1" href="#">左侧列表标题</a></li>
       <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
      </ul>
     </div>
     <!-- 定义一个面板结构 -->
     <div class="col-md-10">
     <div class="panel panel-info">
      <div class="panel-heading">
       <strong>面板的头部</strong>
      </div>
      <div class="panel-body">
       
       <!-- 定义表格 -->
       <!-- bordered:表格带有边框线条、hover:鼠标移动时表格行的颜色改变、striped表格行的颜色隔行变换 -->
       <table class="table table-bordered tabel-hover table-striped">
        <tr>
         <td class="text-center"><input type="checkbox" id="selectedAll" name="selectedAll"></td>
         <td class="text-center"><strong>标题</strong></td>
         <td class="text-center"><strong>发布日期</strong></td>
         <td class="text-center"><strong>操作</strong></td>
        </tr>
        <tr>
         <td class="text-center"><input type="checkbox" id="nid" name="selectedAll" value="3"></td>
         <td class="text-center"><strong>JQuery</strong></td>
         <td class="text-center"><strong>2016-05-14</strong></td>
         <td class="text-center"><button class="btn btn-info bt-xs"><span class="glyphicon glyphicon-edit"> 修改</span></button></td>
        </tr>
       </table>
          <button class="btn btn-info" id="delBtn"><span class="glyphicon glyphicon-trash"></span> 删除</button>
      </div>
        <div id="dividedPage" class="text-right">
          <ul class="pagination pagination-sm" id="pagecontrol">
           
          </ul>
        </div>
      <div class="panel-footer">
       <strong>面板的底部</strong>
      </div>
     </div>
      </div>
    </div>
  </div>
 </div>
</body>
<script type="text/javascript">
</script>
</html>

2.3 再新建一个页面

    split.jsp

<%@ page pageEncoding="UTF-8" language="java" %>
<%
 System.out.println("当前页码:"+request.getParameter("cp")) ;
 System.out.println("每页显示数据量:"+request.getParameter("ls")) ;
%>
{"allRecorders": 327}

 2.3.1 本次的重点在于“allRecorders”JSON数据上,同时需要着重分页控制上


2.4 定义一个news_list.js文件,并把它包含到news_list.htm页面中

    news_list.js

// 实现分页功能
var jsCommonCp = 1 ; //当前的页码
var jsCommonLs = 5 ; //每页显示数据量
var jsCommonPageSize ; //总页数
// 读取JSP页面所返回的数 据
function loadData(){ //数据读取的函数定义
 $.post("split.jsp",{"cp":jsCommonCp,
      "ls":jsCommonLs},function(obj){
       alert("总计录数:"+obj.allRecorders)
      },"json") ;
}

2.5 这样当打开news_list.htm页面时会弹出下图所示 

2.6 定义一个实现分页功能的函数

    news_list.js

// 实现分页功能
var jsCommonCp = 1 ; //当前的页码
var jsCommonLs = 5 ; //每页显示数据量
var jsCommonPageSize ; //总页数
$(function(){
    loadData() ;
}) ;
// 读取JSP页面所返回的数 据
function loadData(){ //数据读取的函数定义
 $.post("split.jsp",{"cp":jsCommonCp,
      "ls":jsCommonLs},function(obj){
       createSplitBar(obj.allRecorders) ;
      },"json") ;
}
function createSplitBar(allRecorders){ //专门用于创建分页操作的
    clearBar();
    calcPageSize(allRecorders) ;
    if(jsCommonPageSize > 1){
        previousPage() ;
        addBar(1)  ;
    }
    var seed = 3 ; //设置一个显示省略号的临界点--种子数,如果大于它则出现,否则不出现
    if(jsCommonCp > seed*2){
        addDetailPage() ; //增加省略号按钮
        var startPage = jsCommonCp - seed ;
        for(var x=startPage ; x<jsCommonCp + seed ; x++){
            if(x < jsCommonPageSize){
                addBar(x) ;
            }
        }
        if(jsCommonCp+2*seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }else{
        for(var x = 2 ; x < jsCommonCp+seed ; x++){
            if(x < jsCommonPageSize)
                addBar(x) ;
        }
        if(jsCommonCp+seed < jsCommonPageSize){
            addDetailPage() ;
        }
    }
    addBar(jsCommonPageSize) ;
    if(jsCommonPageSize > 1){
        nextPage() ;
    }
}
function clearBar(){ //定义数据的清空操作
    $("#pagecontrol li").remove() ;
}
function addBar(index){ //用来生成分页功能的代码,即增加页面页码标签
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style='cursor:pointer;'>"+index+"</a>") ;
    if(jsCommonCp == index){
        liObj.addClass("active") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
           jsCommonCp = index ;
            loadData() ;
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function addDetailPage(){ //添加省略号按钮
    var liObj = $("<li><span>...</span></li>") ;
    $("#pagecontrol").append(liObj) ;
}
function previousPage(){ //在页面定义上一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style='cursor:pointer;'>上一页</a>") ;
    if(jsCommonCp == 1){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp > 1){ //如果还存在有上一页
                jsCommonCp -- ;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function nextPage(){ //在页面定义下一页按钮
    var liObj = $("<li></li>") ; //定义一个li元素节点对象
    var aObj = $("<a style='cursor:pointer;'>下一页</a>") ;
    if(jsCommonCp == jsCommonPageSize){
        liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式
    }else{
        aObj.on("click",function(){
            if(jsCommonCp < jsCommonPageSize){ //如果还存在有下一页
                jsCommonCp ++;
                loadData() ;
            }
        }) ;
    }
    liObj.append(aObj) ;
    $("#pagecontrol").append(liObj) ;
}
function calcPageSize(allRecorders){ //计算总页数
    //alert("calcPageSize function") ;
    if(allRecorders == 0){
        jsCommonPageSize = 1 ;
    }else{
        //js与java不一样此时不会自动转换成整型数据,需要手动设置
        jsCommonPageSize = parseInt((allRecorders+jsCommonLs-1)/jsCommonLs) ;
    }
}

2.7 通过上面的实现就完成了一个分页的组件,在以后的项目开发中就可以直接应用上面的代码实现异步加载来显示分页效果了

    最终效果图



资源文件下载:
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场