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

原创 2016年05月31日 11:39:25
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 通过上面的实现就完成了一个分页的组件,在以后的项目开发中就可以直接应用上面的代码实现异步加载来显示分页效果了

    最终效果图



资源文件下载:

bootstrap-table插件实现ajax服务端分页显示

利用bootstrap-table插件实现ajax服务端分页 1、引入bootstrap-table插件核心js、css以及中文语言文件 网上提供的在线cdn,如果加载时间过长,请下载插件到项目引入 ...

利用SQLAlchemy和Bootstrap实现数据分页显示

随着Web业务拓展,数据量会不断增长,如果在一个页面上将全部数据一次性显示出来,服务器和浏览器都会受到很大影响,不切合实际。一般的解决方式是采用分页显示的办法。在Flask框架中,可以利用SQLAlc...

57-005-1 bootstrap在表单中的利用,表单验证以及jquery验证框架的使用

使用jquery验证框架进行bootstrap样式的操作 1. 表单验证最常用的形式是用户注册或登录的提交,如果失败则显示红色,如果成功 显示绿色,如图: 2....

利用Struts2和Hibernate实现页面分页显示的功能

————-刚刚接触Struts2和Hibernate框架,将学习到的一点知识和大家分享,欢迎指正————– 技术要点:①使用Struts2中Action的注入方式实现数据的传递;②使用Hiberna...
  • tao_ssh
  • tao_ssh
  • 2016年07月08日 21:15
  • 217

Spring+Hibernate+Struts2项目 分页显示算法实现

分页显示一直是web开发中一大烦琐的难题,传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码,那样做分页可能简单一点,但当把网站分层开发后,分页就比较困难了,下面是我做Sprin...
  • CICI622
  • CICI622
  • 2013年02月21日 16:42
  • 623

使用select2实现查询结果分页显示

js代码:$("#tag").select2({ language : 'zh-CN',//转为中文版 minimumInputLength: 1,//最少输入1个字符...

struts2实现分页显示

在开发web程序时,从数据库中取出来的数据一般都要分页显示在页面上,分页显示的方法非常多,有人写自定义标签,用自己写的标签进行分页显示,我个人觉得这是一种比较好的方法。下面是我用Struts2做的一个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:57-005-2 bootstrap实现分页显示
举报原因:
原因补充:

(最多只允许输入30个字)