bootstrap +springMVC+mybtis分页

最新推荐文章于 2024-05-22 11:23:12 发布

早上的阳光

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量3k

点赞数

分类专栏： java 文章标签： bootstrap

本文链接：https://blog.csdn.net/u010011737/article/details/51512972

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近在做bootstrap 分页给大家分享一下

页面效果如下：

<pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%  String path=request.getContextPath()%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap分页实例</title>
<link href="<%=path%>/static/js/bootstrap//css/bootstrap.min.css" rel="stylesheet">
<script src="<%=path%>/static/js/jQuery/jquery-2.1.4.min.js"></script>
<script src="<%=path%>/static/js/bootstrap/js/bootstrap.min.js"></script>
<script src="<%=path%>/static/js/bootstrap/js/bootstrap-paginator.min.js"></script>
<style type="text/css">
#queryDiv {
 margin-right: auto;
 margin-left: auto;
 width:600px;
}
#textInput {
 margin-top: 10px;
}
#tableResult {
 margin-right: auto;
 margin-left: auto;
 width:600px;
}
td {
 width:150px
}
</style>
</head>
<body>
	<div id = "queryDiv">
		<input id = "textInput" type="text" placeholder="请输入用户名" >
		<button id = "queryButton" class="btn btn-primary" type="button">查询</button>
	</div>
	<form id="form1">
		<table class="table table-bordered" id = 'tableResult'>
			<caption>查询用户结果</caption>
			<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>密码</th>
					<th>用户邮箱</th>
				</tr>
			</thead>
			<tbody id="tableBody">
			</tbody>
		</table>
		<!-- 底部分页按钮 -->
		<div id="bottomTab" ></div>
	</form>
	<script type='text/javascript'>    
	    var PAGESIZE = 5;
        var options = {  
            currentPage: 1,  //当前页数
            totalPages: 5,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
            size:"normal",  
            alignment:"center",  
            itemTexts: function (type, page, current) {  
                switch (type) {  
                    case "first":  
                        return "第一页";  
                    case "prev":  
                        return "前一页";  
                    case "next":  
                        return "后一页";  
                    case "last":  
                        return "最后页";  
                    case "page":  
                        return  page;  
                }                 
            },  
            onPageClicked: function (e, originalEvent, type, page) {  
            	var userName = $("#textInput").val(); //取内容
            	buildTable(userName,page,PAGESIZE);//默认每页最多10条
            }  
        }  

        //获取当前项目的路径
        var urlRootContext = (function () {
            var strPath = window.document.location.pathname;
            var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
            return postPath;
        })();
        
       
        //生成表格
        function buildTable(userName,pageNumber,pageSize) {
        	 var url =  urlRootContext + "/list.do"; //请求的网址
             var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据
             $(function () {   
             	  $.ajax({
             	        type:"POST",
             	        url:url,
             	        data:reqParams,
             	        async:false,
             	        dataType:"json",
             	        success: function(data){
             	            if(data.isError == false) {
             	           // options.totalPages = data.pages;
             	        var newoptions = {  
                        currentPage: 1,  //当前页数
                        totalPages: data.pages==0?1:data.pages,  //总页数
                        size:"normal",  
                        alignment:"center",  
                        itemTexts: function (type, page, current) {  
                        switch (type) {  
                            case "first":  
                            return "第一页";  
                            case "prev":  
                            return "前一页";  
                            case "next":  
                            return "后一页";  
                            case "last":  
                            return "最后页";  
                        case "page":  
                        return  page;  
                }                 
            },  
            onPageClicked: function (e, originalEvent, type, page) {  
            	var userName = $("#textInput").val(); //取内容
            	buildTable(userName,page,PAGESIZE);//默认每页最多10条
            }  
         }             	           
         $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目
         var dataList = data.dataList;
         $("#tableBody").empty();//清空表格内容
         if (dataList.length > 0 ) {
             $(dataList).each(function(){//重新生成
             	    $("#tableBody").append('<tr>');
                    $("#tableBody").append('<td>' + this.userId + '</td>');
                    $("#tableBody").append('<td>' + this.userName + '</td>');
                    $("#tableBody").append('<td>' + this.userPassword + '</td>');
                    $("#tableBody").append('<td>' + this.userEmail + '</td>');
                    $("#tableBody").append('</tr>');
             	    });  
             	    } else {             	            	
             	          $("#tableBody").append('<tr><th colspan ="4"><center>查询无数据</center></th></tr>');
             	    }
             	    }else{
             	          alert(data.errorMsg);
             	            }
             	      },
             	        error: function(e){
             	           alert("查询失败:" + e);
             	        }
             	    });
               });
        }
        
        //渲染完就执行
        $(function() {
        	
        	//生成底部分页栏
            $('#bottomTab').bootstrapPaginator(options);     
        	
        	buildTable("",1,5);//默认空白查全部
        	
            //创建结算规则
            $("#queryButton").bind("click",function(){
            	var userName = $("#textInput").val();	
            	buildTable(userName,1,PAGESIZE);
            });
        });
    </script>
</body>
</html>

</pre><p></p><p><pre name="code" class="sql">create table T_USER
(
  USER_ID       NUMBER,
  USER_NAME     VARCHAR2(200),
  USER_PASSWORD VARCHAR2(200),
  USER_EMAIL    VARCHAR2(200)
)

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (2, 'ding', '12345', 'ding@qq.com', 'AAAbSkAAOAAAAT/AAB');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (3, 'wang', '12345', 'wang@qq.com', 'AAAbSkAAOAAAAT/AAC');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (4, 'zhao', '12345', 'zhao@qq.com', 'AAAbSkAAOAAAAT/AAD');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (5, '张三', '12345', 'zhang@qq.com', 'AAAbSkAAOAAAAT/AAE');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (6, 'li', '12345', 'li@qqq.com', 'AAAbSkAAOAAAAT/AAF');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (7, 'jiang', '12345', 'jiang@qq.com', 'AAAbSkAAOAAAAT/AAG');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (8, 'zheng', '12345', 'zheng@qq.com', 'AAAbSkAAOAAAAT/AAH');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (9, 'liu', '12345', 'liu@qq.com', 'AAAbSkAAOAAAAT/AAI');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (10, 'yu', '12345', 'yu@qq.com', 'AAAbSkAAOAAAAT/AAJ');

insert into t_user (USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL, ROWID)
values (11, 'gu', '12345', 'gu@qq.com', 'AAAbSkAAOAAAAT/AAK');

下载工程地址http://download.csdn.net/detail/u010011737/9532718点击打开链接

访问地址：http://localhost:8080/ssm_project/bootstrapPage