js组件-bootstrap table 客户端分页与搜索总结

先上代码以及效果图

ｈｔｍｌ代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
      <script type="text/javascript" src="${APP_PATH}/js/bootstrap-dialog.min.js"></script>
           <link href="${APP_PATH}/plugin/layui/css/layui.css" rel="stylesheet" />
	             <script type="text/javascript" src="${APP_PATH}/js/bootstrap-pagy.min.js"></script>
        <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/commone.css" />
         <script type="text/javascript" src="${APP_PATH}/js/teacherList.js"></script> 
                
        <!-- 必须引入 -->
 		 <script type="text/javascript" src="${APP_PATH}/js/jquery-2.0.0.min.js"></script>
        <script type="text/javascript" src="${APP_PATH}/js/bootstrap.min.js"></script>
        <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap.min.css" />
	      <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap-table.css" />
         <script type="text/javascript" src="${APP_PATH}/js/bootstrap-table.js"></script>
         <script type="text/javascript" src="${APP_PATH}/js/bootstrap-table-zh-CN.js"></script>
         
         
              
</head>
<body>
 	 <div>
 	  <table id="TeacherInfoTable">
 	  
 	  
 	  </table>  
 	 </div>
 	 
 	 <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>

</body>
</html>

其中后面６个是必须要引入的

Bootstrap中文网：http://www.bootcss.com/

Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/

Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

给出下载地址

js代码

$(function(){
	$('#TeacherInfoTable').bootstrapTable({
		url : 'teacher/getAllList', // 请求后台的URL（*）			
		method : 'get', // 请求方式（*）
		toolbar : '#toolbar', // 工具按钮用哪个容器
 		 
		striped : true, // 是否显示行间隔色
		cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	//	sortable : true, //用 是否启排序
	//	sortOrder : "asc", // 排序方式
		sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
		pagination : true, // 是否显示分页（*）
		pageNumber: 1,    //如果设置了分页，首页页码
		pageSize: 4,                       //每页的记录行数（*）
	    pageList: [4,5,6],        //可供选择的每页的行数（*）
	//	onlyInfoPagination:false, //设置为 true 只显示总数据数，而不显示分页
		showRefresh : true, // 是否显示刷新按钮
//		queryParamsType:'',
		clickToSelect : true, // 是否启用点击选中行
	//	uniqueId : "fileid", // 每一行的唯一标识，一般为主键列
	 	showToggle : false, // 是否显示详细视图和列表视图的切换按钮
	//	cardView : false, // 是否显示详细视图
	//	detailView : false, // 是否显示父子表
		search:true,   //是否启用搜索框
		
		columns : [ {
			field : 'tUsername',
			title : '教师号',
			 align: 'center',
             valign: 'middle'
		},{
			field : 'tName',
			title : '姓名',
			 align: 'center',
             valign: 'middle'
			 
		}, {
			field : 'tAge',
			title : '年龄',
			 align: 'center',
             valign: 'middle'
		 
		}, {
			field : 'tDepartment',
			title : '所属学院',
			 align: 'center',
             valign: 'middle'
		} ],
		silent : true, // 刷新事件必须设置
		 	 
	});
})

Controller层代码

@RequestMapping("/getAllList")
		@ResponseBody
		public List<Teacher> getTeacherAll()
		{
			
			return teacherService.getTeacherList();

	 
		}

数据返回示例

总结：

　客户端分页　将分页方式定为ｃｌｉｅｎｔ　一次性从后台请求所有数据　由前台进行分页以及搜索功能，而不必再次请求服务器端

　优点：方便　简单

　缺点：当数据过多时会对性能造成影响

　后面一篇会介绍服务器端的分页以及搜索

js组件-bootstrap table 客户端分页与搜索总结

猜你喜欢