使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询

注：博主用到了Bootstrap 框架美化页面
页面代码

<table class="table table-hover">
            <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>phone</td>
            <td>emp_sex</td>
            <td>emp_post</td>
            <td>emp_status</td>
            <td>emp_indate</td>
            <td>emp_outdate</td>
            <td>emp_other</td>
            <td>操作</td>
        </tr>
            </thead>
            <tbody id="ok">

            </tbody>
        </table>
        <!--当前页 总页数 总记录数 -->
        <p id="pagehelp"></p>

        <!-- 分页按键 -->
        <nav aria-label="Page navigation">
        <ul id="jbgao" class="pagination">

        </ul>
        </nav>

在加载jsp页面时发送请求得到数据

<script type="text/javascript">
    $(function() {
                $.ajax({
                    type : "POST",
                    url : "sdf/test",
                    data : "",
                    success : function(result) {
                        //alert(result.returnData.keys[1].empId);
                        //成功调用。。。
                        showAll(result);
                        showing(result);
                    }
                });
            });
//博主是在首次插入时数据给每个td一个id然后用一个loadXMLDoc()函数通过每个id替换之前的数据,博主这里有点脱裤子放屁了
        function showAll(result) {
        //可以不加id不写loadXMLDoc()直接在这写一个empty()清空上一次的数据代码更可观
        var test=0;
        $.each(result.returnData.keys.list, function(index, item) {
        var ok = $("<td></td>").attr("id","myid"+test+"").append(item.empId);
        var empName = $("<td></td>").attr("id","myname"+test+"").append(item.empName);
        var empPhone = $("<td></td>").attr("id","myPhone"+test+"").append(item.empPhone);
        var empSex = $("<td></td>").attr("id","mySex"+test+"").append(item.empSex==1?"女":"男");
        var empPost = $("<td></td>").attr("id","myPost"+test+"").append(item.empPost);
        var empstatus = $("<td></td>").attr("id","myStatus"+test+"").append(item.empStatus);
        var empIndate = $("<td></td>").attr("id","myIndate"+test+"").append(item.empIndate);
        var empOutdate = $("<td></td>").attr("id","myOutdate"+test+"").append(item.empOutdate);
var show = $("<tr></tr>").append(ok).append(empName).append(empPhone).append(empSex).append(empPost)
.append(empstatus).append(empIndate).append(empOutdate).appendTo("#ok");
                    test++;
                });     
            }
            function showing(result) {
            var ing=result.returnData.keys.pageNum;
            $("#pagehelp").text("当前第" +ing+ "页,总共" + result.returnData.keys.pageSize
                + "页,总记录数" + result.returnData.keys.total);
            showzhuta(result);
            }

            function showzhuta(result){
                $("#jbgao").empty();  
                //首页
        var so=$("<li></li>").append($("<a></a>").append("首页")).appendTo("#jbgao");
                so.click(function(){
                    loadXMLDoc(1);  
                });
                //上一页
        var next=$("<li></li>").append($("<a></a>").append("<<")).appendTo("#jbgao");
                if(result.returnData.keys.hasPreviousPage==true){
                next.click(function(){
                    loadXMLDoc(result.returnData.keys.pageNum - 1);
                });
                }
            //显示当前状态
    $.each(result.returnData.keys.navigatepageNums, function(index, item) {
var dao=$("<li></li>").append($("<a></a>").append(item)).appendTo("#jbgao");
                        dao.click(function(){
                            loadXMLDoc(item);   
                        });
                    });
        //下一页
var next=$("<li></li>").append($("<a></a>").attr("href","#").append(">>")).appendTo("#jbgao");
        if(result.returnData.keys.hasNextPage==true){
        next.click(function(){
            loadXMLDoc(result.returnData.keys.pageNum + 1);
        });
        }
                //尾页
    var ho=result.returnData.keys.pages;
var ing=$("<li></li>").append($("<a></a>").append("尾页")).appendTo("#jbgao");
                ing.click(function(){
                    loadXMLDoc(ho); 
                        });
                }

            /*
             * 定义替换的方法
             */
            function loadXMLDoc(vi) {
                $.ajax({
                    type : "POST",
                    url : "sdf/test?pn="+vi+"",
                    data : "",
                    success : function(result) {
                        var tests = 0;
        $.each(result.returnData.keys.list, function(index,item){
                    $("#myid" + tests + "").html(item.empId);
                    $("#myname" + tests + "").html(item.empName);
                    $("#myPhone" + tests + "").html(item.empPhone);
    $("#mySex" + tests + "").html(item.empSex == 1 ? "女" : "男");
                    $("#myPost" + tests + "").html(item.empPost);
                    $("#myStatus" + tests + "").html(item.empStatus);
                $("#myIndate" + tests + "").html(item.empIndate);
                $("#myOutdate" + tests + "").html(item.empOutdate);
                            tests++;
                        });
                        showing(result);

                    }
                });
            }
</script>           

Controller类

import java.util.List;

import javax.servlet.http.HttpServletRequest;

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.servlet.ModelAndView;

import com.budo.beancla.Employee;
import com.budo.beancla.Performance;
import com.budo.run.Test;
import com.budo.service.Serlet;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Controller
@RequestMapping("/sdf")
public class Context {
    Employee em = new Employee();

    @Autowired
    Serlet ser;
    //要使用ResponseBody注解
    @RequestMapping("/test")
    @ResponseBody
    public Test test(@RequestParam(value = "pn", defaultValue = "1") Integer ge) {
        PageHelper.startPage(ge, 3);
        System.out.println("yes");
        //查询出数据
        List<Employee> list = ser.sele();
        PageInfo page=new PageInfo(list,3);
        //将数据返回
        return Test.success().add("keys", page);
    }

}

Test类json数据封装

import java.util.HashMap;
import java.util.Map;

public class Test {
    // 666即成功，444即失败
        private int code;
        // 提示信息
        private String msg;
        // 服务端要返回到客户端的数据
        private Map<String, Object> ReturnData = new HashMap<String, Object>();

        /**
         * 自定义一个简单的成功方法
         * @return
         */
        public static Test success(){
            Test msg = new Test();
            msg.setCode(666);
            msg.setMsg("执行成功!");
            return msg;
        }
        /**
         * 自定义一个简单的失败方法
         * @return
         */
        public static Test fail(){
            Test msg = new Test();
            msg.setCode(444);
            msg.setMsg("执行失败!");
            return msg;
        }
        /**
         * 自定义一个添加返回数据的方法
         * @return
         */
        public Test add(String arg0,Object arg1){
            this.getReturnData().put(arg0, arg1);
            return this;
        }
        public Map<String, Object> getReturnData() {
            return ReturnData;
        }
        public void setReturnData(Map<String, Object> returnData) {
            ReturnData = returnData;
        }
        public int getCode() {
            return code;
        }
        public void setCode(int code) {
            this.code = code;
        }

        public String getMsg() {
            return msg;
        }

        public void setMsg(String msg) {
            this.msg = msg;
        }
}