Bootstrap——table后端分页

 JSON格式

{
	"total": 6,
	"rows": [
		{
			"userid": 1,
			"username": "xiaoming33333",
			"password": "5840af7f870892bdf35edf6106fc3fdf",
			"salt": "xiaoming",
			"status": 0
		},
		{
			"userid": 2,
			"username": "xiaozhang",
			"password": "c2a42ff59460c885c7ea4ca64fefbc52",
			"salt": "xiaozhang",
			"status": 0
		}
	]
}

 

pom.xml导入分页插件 （如果不显示注意传入JSON的格式,传对象不显示，需要封装成LIst）

        <dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>4.1.6</version>
		</dependency>

需要自定义工具类一个PageBean,一个PageVoUtils 

package com.csgg.page;

import java.io.Serializable;
import java.util.List;

/**
 * 适用于easyuiUI的datagrid组件的分页对象
 * 两个属性必须叫做：total,rows
 * @author Kevin
 *
 * @param <T>
 */
public class PageBean<T> implements Serializable {
	private Long total;//满足条件的总记录数
	private List<T> rows;//所请求的当前页的数据集合

	public Long getTotal() {
		return total;
	}

	public void setTotal(Long total) {
		this.total = total;
	}

	public List<T> getRows() {
		return rows;
	}

	public void setRows(List<T> rows) {
		this.rows = rows;
	}

}

package com.csgg.page;

import com.github.pagehelper.PageInfo;

public class PageVoUtils {
public static <T> PageBean<T> convertTopageVo(PageInfo<T> pageInfo){
	PageBean<T> pagevo=new PageBean<T>();
	pagevo.setTotal(pageInfo.getTotal());
	pagevo.setRows(pageInfo.getList());
	return pagevo;
}
}

 

 

Service实现类 

package com.csgg.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.csgg.dao.Mydao;
import com.csgg.mapper.UsersMapper;
import com.csgg.po.Users;
import com.csgg.po.UsersExample;
import com.csgg.po.UsersExample.Criteria;
import com.csgg.service.UserService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UsersMapper um;
	@Override
	public PageInfo<Users> select(int pageNo, int pageSize,Mydao mydao) {
		// TODO Auto-generated method stub
		UsersExample example=new UsersExample();
		Criteria criteria = example.createCriteria();
		if(mydao.getUsername()!=null && !"".equals(mydao.getUsername())) {
			criteria.andUsernameLike(mydao.getUsername());
		}
		if(mydao.getUsersalt()!=null) {			
			criteria.andSaltEqualTo(mydao.getUsersalt());
		}
		PageHelper.startPage(pageNo, pageSize);
		List<Users> filName = this.um.selectByExample(example);
		PageInfo<Users> info=new PageInfo<Users>(filName);
		System.out.println(info);
		return info;
	}

}

 Controller

package com.csgg.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.csgg.dao.Mydao;
import com.csgg.mapper.UsersMapper;
import com.csgg.page.PageBean;
import com.csgg.page.PageVoUtils;
import com.csgg.po.Users;
import com.csgg.service.UserService;
import com.github.pagehelper.PageInfo;

@RestController
public class UsersController {
	@Autowired
	private UsersMapper usersMapper;
	
	@Autowired
	private UserService us;
	
	@RequestMapping("/list")
	public PageBean<Users> selectUsers(@RequestParam(value="pageNo",required=true,defaultValue="1")int pageNo,
									   @RequestParam(value="pageSize",required=true,defaultValue="2")int pageSize,Mydao mydao) {
		System.out.println("--------"+mydao.getUsername());
		
		PageInfo<Users> pageInfo = this.us.select(pageNo, pageSize,mydao);
		PageBean<Users> pageBean=PageVoUtils.convertTopageVo(pageInfo);
		return pageBean;
	}
	
	
}

JSP页面 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
<style type="text/css">
td,th{
text-align:center;
}
th{
background-color: #fafafa;
}
#table tr:nth-child(even){
background: #fafafa;
}
#table th{
background: #efefef;
}

</style>
</head>
<body>
	 
		
	<div id="toolbar">
		姓名：<input type="text" name="name" id="n1"/>
		<input type="button" id="cha" value="查询"/>
	</div>
	<table id="table"></table>
	<div class="modal fade" id="employeeDlg">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">编辑用户信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="formid"  method="post" action="student/add.action">
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">姓名：</label>
								<div class="col-md-8">
									<input type="text" id="uname" name="name" placeholder="姓名" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">密码：</label>
								<div class="col-md-8">
									<input type="text" id="password" name="password" placeholder="密码" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">盐值：</label>
								<div class="col-md-8">
									<input type="text" id="salt" name="salt" placeholder="盐值" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">加盐：</label>
								<div class="col-md-8">
									<input type="text" id="status" name="status" placeholder="加盐" class="form-control" />
								</div>
							</div>
							
							<div class="form-group">
								<div class="text-center form-group">
									<input type="hidden" id="sid" name="sid"/>
									<!-- <input type="submit" value="提交" class="btn btn-primary" /> -->
									<button type="submit" class="btn btn-primary" data-dismiss="">确定</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	<script type="text/javascript" src="bootstrap/js/jquery.min.1.12.4.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap-table.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript">
			var $table;
	        //初始化bootstrap-table的内容
	        
	        $(function() {
	            //记录页面bootstrap-table全局变量$table，方便应用
	            //var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
	            $table = $('#table').bootstrapTable({
	                url: '/list',                       //请求后台的URL（*）
	        	    method: 'get',                     //请求方式（*）
                    //post,contentType: "application/x-www-form-urlencoded",
	                toolbar: '#toolbar',                //工具按钮用哪个容器
	                striped: true,                      //是否显示行间隔色
	                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                sortable: true,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                pagination: true,                   //是否显示分页（*）
	                sidePagination: "server",           //分页方式：client客户端分页(默认)，server服务端分页（*）
	                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
	                pageSize: 2,                     	//每页大小
	                pageList: [2, 3, 4],        		//可供选择的每页的行数（*）
	                search: true,                       //是否显示表格搜索
	                strictSearch: true,					//设为true，开启精确搜索
	                showColumns: true,                  //是否显示所有的列（选择显示的列）
	                showRefresh: true,                  //是否显示刷新按钮
	                minimumCountColumns: 2,             //最少允许的列数
	                clickToSelect: true,                //是否启用点击选中行
	                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	                uniqueId: "userid",                 //每一行的唯一标识，一般为主键列
	                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
	                cardView: false,                    //是否显示详细视图
	                detailView: false, 					//得到查询的参数
	                queryParams : function (params) {
	                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	                  var temp = {   
	                		  	pageSize: params.limit,                         //页面大小
	                    		pageNo: (params.offset / params.limit) + 1,  //页码
	                    		username:$("#n1").val(),
	                    		//sort: params.sort,      //排序列名  
	                            //sortOrder: params.order //排位命令（desc，asc） 
	                    }
	                    return temp;
	                },
	                columns: [{
	                    checkbox: true,  
	                    visible: true                  //是否显示复选框  
	                }, {
	                    field: 'userid',
	                    title: '编号',
	                }, {
	                    field: 'username',
	                    title: '姓名',
	                }, {
	                    field: 'password',
	                    title: '密码',
	                }, {
	                    field: 'salt',
	                    title: '盐值',
	                }, {
	                    field: 'status',
	                    title: '加盐'
	                } , {
	                    field: 'userid',
	                    title: '操作',
	                    formatter:function(value,row,index){
	                    	return "<button type='button' style='margin-right:20px;' class='btn btn-primary' data-toggle='modal' data-target='#employeeDlg'>编辑</button><button type='button' class='btn btn-danger'>删除</button>";
	                    }
	                } ],
	                onLoadSuccess: function () {//加载绑定
	                	$("#table .btn-primary").click(function(ev){
	        				var tr = $(ev.target.parentElement.parentElement);
	                		$("#uname").val(tr.children()[2].innerHTML);
	                		$("#password").val(tr.children()[3].innerHTML);
	                		$("#salt").val(tr.children()[4].innerHTML);
	                		$("#status").val(tr.children()[5].innerHTML)
	        			});
	                },
	                onLoadError: function () {
	                    showTips("数据加载失败！");
	                },
	                onDblClickRow: function (row, $element) {
	                    var id = row.username;
	                    //alert(id);
	                },
	            });
	           
	           $("#cha").click(function(){
	            	$("#table").bootstrapTable('refresh');
	            }); 
	        });
	        /* $(function() {
				$("#table td button.btn-primary").bind("click", showEdit);
				$("#table td button.btn-danger").bind("click", deleteConfirm);
			}); */
			
	</script>	
</body>
</html>