使用bootstraptable实现分页

Bootstrap-table介绍

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

效果图

js代码

var $table;	
var rows = 5;
function initMainTable() {	//初始化bootstrap-table的内容
    //记录页面bootstrap-table全局变量$table，方便应用
    var queryUrl = 'welcome';
    $table = $('#grid').bootstrapTable({
        url: queryUrl,                      //请求后台的URL（*）
        method: 'GET',                      //请求方式（*）
        toolbar: '.toolbar',              	//工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: rows,                     //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: false,                      //是否显示表格搜索
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {   
                rows: params.limit,                         //页面大小
                page: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名  
                sortOrder: params.order //排位命令（desc，asc） 
            };
            return temp;
        },
        columns: [{
            checkbox: true,  
            visible: true                  //是否显示复选框  
        }, {
            field: 'sno',
            title: '学号',
            sortable: true
        }, {
            field: 'sname',
            title: '姓名',
            sortable: true
        }, {
            field: 'isMale',
            title: '性别',
            sortable: true,
            formatter: genderFormatter
        }, {
            field: 'birth',
            title: '生日'
        }, {
            field:'sno',
            title: '操作',
            width: 120,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter
        }, ],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
            alert("数据加载失败！");
        },
        onDblClickRow: function (row, $element) {
            var id = row.sno;
            edit(id);
        },
        responseHandler: responseHandler,
    });
};
	

function actionFormatter(value, row, index) {	//操作栏的格式化
    var id = value;
    var result = "";
    result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"view(" + id + ")\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"edit(" + id + ")\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"del(" + id + ")\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
    return result;
}

/**
 * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式
 * @param {Object} res
 */
function responseHandler(res) {
	 return {
		 "rows": res.data.rows, // 具体每一个bean的列表
		 "total": res.data.total // 总共有多少条返回数据
	 }
}
     
//性别字段格式化
function genderFormatter(value) {
	var gender;
	if (value == false) { 
		color = 'Red'; 
		gender = '小姐姐';
	}
	else if (value == true) {
		color = 'Blue';
		gender = '大帅哥';
	}
	else { color = 'Yellow'; }
	return '<div  style="color: ' + color + '">' + gender + '</div>';
}   

html代码

<div>
<table id="grid" class="table" data-toolbar=".toolbar"></table>
</div>
<div id="toolbar" class="toolbar">
<button type="button" class="btn btn-primary" onclick="add();">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
</button>
</div>

java代码

package com.yzc.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.yzc.utils.DBUtil;

@WebServlet("/welcome")
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	@Override
	public void service(HttpServletRequest req, HttpServletResponse resp) {
		PrintWriter pw = null;
		Connection conn = null;
		PreparedStatement stmt = null;
		//解决响应正文内容包含中文会出现乱码的问题
		resp.setContentType("application/json;charset=utf-8");
		//
		int rows = Integer.parseInt(req.getParameter("rows"));
		//
		int page = Integer.parseInt(req.getParameter("page"));
		//
		int begin = (page-1)*rows;		
		StringBuilder str = new StringBuilder();
		try {
			pw = resp.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		try {
			conn = DBUtil.getConnection();
			stmt = conn.prepareStatement("SELECT COUNT(*) FROM STUDENT");
			ResultSet rs = stmt.executeQuery();
			rs.next();
			str.append("{\"result\":\"success\",\"message\":\"\",\"data\":{\"total\":"+rs.getInt(1)+",\"rows\":[");
			stmt = conn.prepareStatement("SELECT * FROM STUDENT ORDER BY SNO LIMIT ?,?");
			stmt.setInt(1, begin);
			stmt.setInt(2, rows);
			rs = stmt.executeQuery();
			while(rs.next()) {
				str.append("{\"sno\":"+rs.getInt(1)+","+
				"\"sname\":\""+rs.getString(2)+"\""+",\"isMale\":"+rs.getString(3).equals("男")+",\"birth\":"+
				"\""+rs.getDate(4)+"\""+",\"url\":\""+rs.getString(5)+"\"},");
			}
			str = new StringBuilder(str.substring(0, str.length()-1));		
			str.append("]}}");
			System.out.println(str);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		pw.println(str);
	}
}

html完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<link rel="stylesheet" href="bootstrap-table/css/bootstrap-table.css">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/js/bootstrap-table.js"></script>
<script src="bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="js/student.js"></script>
<script type="text/javascript">	
	$(function(){
		$('.form_date').datetimepicker({
		  language: 'zh-CN',
		  weekStart: 1,
		  todayBtn: 1,
		  autoclose: 1,
		  todayHighlight: 1,
		  startView: 2,
		  minView: 2,
		  forceParse: 0,
		 });
		
		initMainTable();
	})  
</script>
</head>
<body class="bg-info">
<!--导航层-->
<div>
	<!--菜单列表-->
	<ul class="nav nav-pills nav-justified">
		<li role="presentation" class="active"><a href="javascript:void(0);">学生基本信息管理</a></li>
		<li role="presentation"><a href="javascript:void(0);">学生档案</a></li>
		<li role="presentation"><a href="javascript:void(0);">学生就业情况</a></li>
	</ul>	
</div>
<div>
<table id="grid" class="table" data-toolbar=".toolbar"></table>
</div>
<div id="toolbar" class="toolbar">
<button type="button" class="btn btn-primary" onclick="add();">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
</button>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="subject"></h3>
            </div>
            <div class="modal-body">
				<form role="form" id="register">
					<div class="form-group" id="first">
						<label for="sid">学号</label> <input type="text"
							class="form-control" id="sid" name="sid" readonly>
					</div>
					<div class="form-group">
						<label for="sname">姓名</label> <input type="text"
							class="form-control" id="sname" name="sname" placeholder="请输入姓名">
					</div>
					<label for="name">性別</label>
					<div class="form-group">
			    		<label class="radio-inline">
			        		<input type="radio" name="gender" id="male" value="1" checked> 靓仔
			    		</label>
			    		<label class="radio-inline">
			        		<input type="radio" name="gender" id="female" value="0"> 美女
			    		</label>
					</div>
					<div class="form-group">
					<label for="birth">生日</label>
					<div class="input-group date form_date" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">						
						<input name="birth" id="birth" class="form-control" type="text" value="" readonly>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-remove"></span>
						</span>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
					</div>  	
					<div class="form-group">
						<label for="photo">上传头像</label>
						<input type="file" id="photo" name="photo">
						<p class="help-block">请上传jpg或者png格式的文件！</p>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-default" onclick="upload();">
			  				<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> 上传
						</button>
					</div>
					<div hidden="hidden">
						<input type="text" name="filePath" id="filePath" value="images/default.png"/>
					</div>
					<div class="form-group">
						<img width="120" height="120" src="images/default.png" id="photo2"/>
					</div>
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

js完整代码

var $table;	
var rows = 5;
function initMainTable() {	//初始化bootstrap-table的内容
    //记录页面bootstrap-table全局变量$table，方便应用
    var queryUrl = 'welcome';
    $table = $('#grid').bootstrapTable({
        url: queryUrl,                      //请求后台的URL（*）
        method: 'GET',                      //请求方式（*）
        toolbar: '.toolbar',              	//工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: rows,                     //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: false,                      //是否显示表格搜索
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {   
                rows: params.limit,                         //页面大小
                page: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名  
                sortOrder: params.order //排位命令（desc，asc） 
            };
            return temp;
        },
        columns: [{
            checkbox: true,  
            visible: true                  //是否显示复选框  
        }, {
            field: 'sno',
            title: '学号',
            sortable: true
        }, {
            field: 'sname',
            title: '姓名',
            sortable: true
        }, {
            field: 'isMale',
            title: '性别',
            sortable: true,
            formatter: genderFormatter
        }, {
            field: 'birth',
            title: '生日'
        }, {
            field:'sno',
            title: '操作',
            width: 120,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter
        }, ],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
            alert("数据加载失败！");
        },
        onDblClickRow: function (row, $element) {
            var id = row.sno;
            edit(id);
        },
        responseHandler: responseHandler,
    });
};
	

function actionFormatter(value, row, index) {	//操作栏的格式化
    var id = value;
    var result = "";
    result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"view(" + id + ")\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"edit(" + id + ")\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"del(" + id + ")\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
    return result;
}

/**
 * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式
 * @param {Object} res
 */
function responseHandler(res) {
	 return {
		 "rows": res.data.rows, // 具体每一个bean的列表
		 "total": res.data.total // 总共有多少条返回数据
	 }
}
     
//性别字段格式化
function genderFormatter(value) {
	var gender;
	if (value == false) { 
		color = 'Red'; 
		gender = '小姐姐';
	}
	else if (value == true) {
		color = 'Blue';
		gender = '大帅哥';
	}
	else { color = 'Yellow'; }

	return '<div  style="color: ' + color + '">' + gender + '</div>';
}   

function add(){
	$("#subject").text("注册学生信息");
	$("#first").hide();
	$("#register")[0].reset();
    $("#photo2").attr("src","images/default.png");
	//$("#edit").css("display","block");
    $('.form_date').datetimepicker("setDate", new Date()); 
    $('#edit').modal('show');
}

function edit(sid){
	$("#register")[0].reset();        		
	$("#subject").text("修改学生信息");
	$("#first").show();
    $("#photo2").attr("src","images/default.png");
	//var sid = $(e).parent().siblings().first().text();
	//alert(sid);
    $.ajax({
    	//几个参数需要注意一下
        type: "GET",//方法类型
        cache: false,
        dataType: "json",//预期服务器返回的数据类型
        url: "edit?sid="+sid ,//url
        success: function (data) {
            //console.log(data);//打印服务端返回的数据(调试用)
            if (data.result == "success") {
            	var stu = data.data;
            	$("#sid").val(stu.sno);
            	$("#sname").val(stu.sname);
            	if(stu.isMale){
            		$("#male").prop("checked",true);
            	}else{
            		$("#female").prop("checked",true);
            	}
            	$("#birth").val(stu.birth);
            	$("#filePath").val(stu.filePath);
                $("#photo2").attr("src",stu.filePath);
                $('#edit').modal('show');
            }
        },
        error : function() {
            alert("异常！");
        }
    });
}

function save(){
    $.ajax({
        	//几个参数需要注意一下
            type: "post",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "save" ,//url
            data: $("#register").serialize(),
            success: function (data) {
                //console.log(data);//打印服务端返回的数据(调试用)
                if (data.result == "success") {
                	$('#edit').modal('hide');
                    //$("#edit").css("display","none");
                    //$("#register")[0].reset();
                    //$("#photo2").attr("src","images/default.png");
                    //alert(data.message);
	            	$table.bootstrapTable('refresh');
                }
            },
            error : function() {
                alert("异常！");
            }
        });
}

function upload(){
	var file = $("#photo").get(0).files[0];
	var formData = new FormData();
	formData.append("source",file);
	$.ajax({
		url:"upload/file",
		type:"post",
		dataType:"json",
		cache:false,
		data:formData,
		contentType:false,
		processData:false,
		success:function(data){
			if(data.result=="success"){
				$("#photo2").attr("src",data.url);
				$("#filePath").val(data.url);
			}
			console.log("hello test");
		}
	});
}

function del(sid){
	//var sid = $(e).parent().siblings().first().text();
	var yesOrNo = confirm("确定要删除该学生么？");
	if(yesOrNo){
	    $.ajax({
	    	//几个参数需要注意一下
	        type: "GET",//方法类型
	        dataType: "json",//预期服务器返回的数据类型
	        url: "delete?sid="+sid ,//url
	        success: function (data) {
	            console.log(data.message);//打印服务端返回的数据(调试用)
	            if (data.result == "success") {
	            	$table.bootstrapTable('refresh');
	            }
	        },
	        error : function() {
	            alert("异常！");
	        }
	    });	
	}
}

参考资料

[01] Bootstrap-table 使用总结
[02] Bootstrap Table使用心得总结
[03] JDBC 中得到 ResultSet 结果集的大小（元素个数）
[04] bootstrapTable刷新当前页码不变和从第一页开始查询
[05] bootstraptable嵌入工具栏
[06] 刷新出现页码混乱的问题
[07] bootstrap-table数据刷新后留在当前页

微信扫一扫关注公众号

点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105