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

ｈｔｍｌ代码

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

<% pageContext.setAttribute("APP_PATH",request.getContextPath()); %>

    <!-- 必须引入 -->
	 <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>

  </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>

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

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 getTeacherAll()
{

		return teacherService.getTeacherList();

 
	} 

数据返回示例

总结：

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

优点：方便　简单

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