SSM异步请求分页+模糊查询

 dao层

dao层
// 根据用户名查询单个用户
	User getUsername(String name) throws Exception;

// 分页列表+模糊查询+排序
	List<User> getUserlist(@Param("pageNo") int pageNo,@Param("pageSize") int pageSize,@Param("name") String name,@Param("isSort") String isSort) throws Exception;

xml文件

<select id="getCount" resultType="int">
		SELECT COUNT(1) FROM t_userinfo
		<if test="name != null and name != ''">
			WHERE name LIKE CONCAT("%",#{name},"%")
		</if>
	</select>
	
	<select id="getUserlist" resultType="User">
		SELECT * FROM t_userinfo
		<where>
			<if test="name != null and name != ''">
				name LIKE CONCAT("%",#{name},"%")
			</if>
		</where>
		ORDER BY userid ${isSort} LIMIT #{pageNo},#{pageSize}
	</select>

page工具类

public class Page<T> {

	private int pageNo;// 当前页码
	private int pageSize;// 每页显示的数据量
	private int totalCount;// 总数据量
	private int totalPage;// 总页数
	private List<T> list;// 用来保存查询出来数据的集合
	
	public int getPageNo() {
		return pageNo;
	}
	public void setPageNo(int pageNo) {
		this.pageNo = pageNo;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public List<T> getList() {
		return list;
	}
	public void setList(List<T> list) {
		this.list = list;
	}
	
}

 service层

//用户列表分页处理
	Page<User> getUserlist(int pageNo,int pageSize,String name,String isSort);

ServiceImpl 层

public Page<User> getUserlist(int pageNo, int pageSize, String name, String isSort) {
		if (pageNo <= 0) {
			pageNo = 1;
		}
		if (pageSize <= 0) {
			pageSize = 5;
		}
		if (StringUtils.isEmpty(isSort)) {
			isSort = "ASC";
		}
		Page<User> page = new Page<User>();
		try {
			page.setPageNo(pageNo);
			page.setPageSize(pageSize);
			int tatalCount = dao.getCount(name);
			page.setTotalCount(tatalCount);
			int totalPage = tatalCount % pageSize == 0 ? tatalCount / pageSize : tatalCount / pageSize + 1;
			page.setTotalPage(totalPage);
			List<User> list = dao.getUserlist((pageNo - 1) * pageSize,pageSize,name,isSort);
			page.setList(list);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return page;
	} 

Controller

@RequestMapping("/showUsers")
	@ResponseBody
	public Map<String, Object> getUserlist(@RequestParam(defaultValue = "1")int pageNo,@RequestParam(defaultValue = "5")int pageSize,@RequestParam(value = "name", required = false) String name,String isSort){
		Map<String, Object> map = new HashMap<String, Object>();
		Page<User> page = service.getUserlist(pageNo, pageSize, name, isSort);
		List<User> list = page.getList();
		Object[] userArray = {list,page.getPageNo(),page.getTotalCount(),page.getTotalPage()};
		map.put("userArray",userArray);
		return map;
	}

js代码

$(function () {
	//执行方法回显数据
	search()
})
var isSort,pageNo = 1,totalPage//全局变量
	//var pageSize;

    //上一页
    $('#pert').click(function (){
        if (pageNo <= 0){
            $(this).attr('disabled',"disabled")
        }else{
            search(pageNo-1)
        }

    })
    //下一页
    $('#next').click(function (){
        if (pageNo >= totalPage){
            $(this).attr('disabled',"disabled")
        }else{
            search(pageNo+1)
        }
    })

    //首页
    $('#start').click(function (){
        search(1)
    })

    //尾页
    $('#end').click(function (){
        search(totalPage)
    })

    //指定页
    function currpage(index){
        search(index)
        $('index_page').toggleClass('action')
    }
 //回显数据
	function search(pageNo){
		//用ajax接收json数据展示用户信息
		var name = $("input[name='userName']").val()
		$.ajax({
			url: 'showUsers',
			type: 'get',
			data: {
				"name": name,
				"isSort": isSort,
                "pageNo":pageNo
               // "pageSize":pageSize
			},
			dataType: 'json',
			success: function (data) {
                var pageNo = data.userArray[1]//当前页码
                var totalCount = data.userArray[2]//总数据量
                totalPage = data.userArray[3]//总页数
                //分页回显
                var $page_Array = new Array(totalPage)
                var $page_list = $('#page_list')
                $page_list.empty()
                for (var i = 0; i < $page_Array.length; i++) {
                    var index = i + 1
                    $page_list.append("<a id='index_page' href='javascript:currpage("+index+")'>"+index+"</a>")
                }
                //console.log(data.userArray[0][0].name)
                //用户信息回显
                var $tbody = $('#tbody_list')
                $tbody.empty();
                for (var i = 0; i < totalCount; i++) {
                    var user_list = data.userArray[0][i]//赋值每一个对象
                    $tbody.append("<tr>" +
                        "<td>"+user_list.userid+"</td>" +
                        "<td>"+user_list.name+"</td>" +
                        "<td>"+user_list.idcard+"</td>" +
                        "<td>"+user_list.mobiile+"</td>" +
                        "<td>"+user_list.address+"</td>" +
                        "<td>"+user_list.birtday+"</td>" +
                        "<td>"+user_list.age+"</td>" +
                        "<td><a class='btn btn-xs btn-info active' id='update' data-toggle='modal'>修改<a/>" +
                        " <a class='btn btn-xs btn-danger active' href='javascript:removeUser('user_list.name')'>删除<a/></td>" +
                        "</tr>")
                }

			}
		});

	}

html代码

<form class="navbar-form" role="search"
                  action="javascript:search()">
                <div class="form-group">
                    <input type="text" class="form-control" name="userName" placeholder="用户名">
                </div>
                <button type="submit" class="btn btn-default btn-success">查询</button>
<%--
				<a id="sort" class="btn btn-default btn-success">排序</a>
--%>
            </form>

<table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>身份证号码</th>
            <th>手机号码</th>
            <th>地址</th>
            <th>出生日期</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody_list">
        </tbody>
    </table>

<ul class="pagination pagination-sm" id="page_li">
			<li><a id="start">首页</a></li>
            <li><a id="pert">&laquo;</a></li>
            <li id="page_list"></li>
            <li><a id="next">&raquo;</a></li>
			<li><a id="end">尾页</a></li>
        </ul>

需要的资源文件

<link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/css/reveal.css"/>
<script
          src="${pageContext.request.contextPath}/statics/js/jquery.min.js"
          type="text/javascript" charset=utf-8></script>
<script
          src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"
          type="text/javascript" charset=utf-8></script>