bootstrap table 分页

 bootstrap
table

分页插件的使用

首先导入需要的js，css文件

     <!-- bootstrap table æ-->
     <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap-3.3.5/css/bootstrap.min.css">
     <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap-3.3.5/css/bootstrap-table.css">
       <script src="<%=path%>/assets/js/jquery-1.12.3.min.js"></script>
	<!-- layer 插件 -->
	<script type="text/javascript" src="<%=path%>/assets/plugins/layer/layer.js"></script>
	<!-- bootstrapTable 插件 -->
	<script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap-table.js"></script>
	<script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap-table-zh-CN.js"></script>

jsp部分

<table class="table table-hover" id="cusTable" data-pagination="true" data-show-refresh="true" data-show-toggle="true" data-showColumns="true">
		<thead>
		</thead>
		<tbody>
		</tbody>
	</table>

<button type="button" class="btn btn-sm yellow" id="search">查询(F)</button>
<button id="button" class="btn btn-default">获取表格数据</button>

js部分

function initTable() {
	//先销毁表格  
	$('#cusTable').bootstrapTable('destroy');
	//初始化表格,动态从服务器加载数据  
	$("#cusTable").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			contentType : 'application/x-www-form-urlencoded',//解决乱码问题
			url : "/xmgjjadmin/demoController/user/demo/userEditor", //获取数据的Servlet地址  
			striped : true, //表格显示条纹  
			pagination : true, //启动分页  
			pageSize : 5, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			search : true, //是否启用查询  
			clickToSelect: true,                //是否启用点击选中行
			showColumns : true, //显示下拉框勾选要显示的列  
			showRefresh : true, //显示刷新按钮  
			sidePagination : "server", //表示服务端请求  
			responseHandler : function(res) {//后台传过来的数据，默认是"rows","total"的json格式，可以在这修改
				 
				console.log(res);
				if (res.total != 0) {
					var row = res.rows;
					return {
						"rows" : row,
						"total" : res.total
					};
				} else {
					return {
						"rows" : [],
						"total" : 0
					};
				}
			},
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "undefined",
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					pageNumber : params.pageNumber,
					pageSize : params.pageSize,
					userName : $("#editor_name").val()
				};
				return param;
			},
			columns : [
					{
						checkbox:"true" ,
					},
					{   
						title : '主键',
						field : 'id',
						sortable:"true",
						align : 'center',
						valign : 'middle'
					},
					{
						title : '账号',
						field : 'acct',
						align : 'center',
						valign : 'middle',
					},
					{
						title : '密码',
						field : 'pwd',
						align : 'center'
					},
					{
						title : '名称',
						field : 'name',
						align : 'center'
					},
					{
						title : '状态',
						field : 'status',
						align : 'center',
					},
					{
						title : '操作',

						align : 'center',
						formatter : function(value, row,
								index) {
							var e = '<a href="#"   οnclick="edit(\''
									+ row.id
									+ '\')">编辑</a> ';
							var d = '<a href="#"   οnclick="del(\''
									+ row.id
									+ '\')">删除</a> ';
							return e + d;
						}
					} ],
			onLoadSuccess : function() { //加载成功时执行  
				console.info("加载成功");
			},
			onLoadError : function() { //加载失败时执行  
				console.info("失败");
			}
		});
	}

        $(function(){

            // bootstrap table 插件的相关操作
        //调用函数，初始化表格  
        initTable();
              
              // 当点击查询按钮的时候执行  
        $("#search").bind("click", initTable);


        //获取选中的数据
        var $table = $('#cusTable'); 
              $('#button').click(function () {
            //获取点击的行的数据
                console.info(getSelectedRow());
                alert(" Selected  name"+getSelectedRow().name);
                //获取checkbox 选中的数据信息
                 var selectContent =$table.bootstrapTable('getSelections');
                 console.info(selectContent);
                 alert(selectContent[0].name);
            });
        
        //获取选中行的数据信息
        function getSelectedRow() {
            var index = $table.find('tr.success').data('index');
            return $table.bootstrapTable('getData')[index];
          }

       })