HTML分页技术

1、通过Jquery插件技术
2、后端传回数据为JSON 进行分页（转自https://blog.csdn.net/LDSWAN0/article/details/78554313）
这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人少走弯路。

前台方面会用到分页的插件，这是传送地址，http://www.jq22.com/jquery-info15943，下载下来，这插件是没有数据交互的，我们要做的就是把数据从数据库取出来，转换成json再传给js。

然后开始，然后把下载下来的插件里面的文件都复制到项目里，就像这样

然后开始写后台代码，这个就是主要的后台处理数据并传json给前台。

public class index {
    //已知数据
    private int pageNum;//当前页
    private int pageSize;//每页显示的数据条数
    private int totalRecord;//总记录条数

    private int totalPage;//总页数
    /*
     * 开始索引，也就是我们在数据库中要从第几行数据开始拿，有了
     *  startIndex和pageSize,就知道了limit语句的两个数据，
     * 就能获得每页需要显示的数据了;
     */
    private int startIndex;

    private List<Logintimes> list;


    public index(int pageNum,int pageSize,int totalRecord){
    this.pageNum=pageNum;
    this.pageSize=pageSize;
    this.totalRecord=totalRecord;

    if(totalRecord%pageSize==0){
        this.totalPage=totalRecord/pageSize;
    }else{
        this.totalPage=totalRecord/pageSize+1;
    }
        this.startIndex=(pageNum-1)*pageSize;
    }


    public index() {
        // TODO Auto-generated constructor stub
    }


    public int getPageNum() {
        return pageNum;
    }


    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }


    public int getPageSize() {
        return pageSize;
    }


    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }


    public int getTotalRecord() {
        return totalRecord;
    }


    public void setTotalRecord(int totalRecord) {
        this.totalRecord = totalRecord;
    }


    public int getTotalPage() {
        return totalPage;
    }


    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }


    public int getStartIndex() {
        return startIndex;
    }


    public void setStartIndex(int startIndex) {
        this.startIndex = startIndex;
    }


    public List<Logintimes> getList() {
        return list;
    }


    public void setList(List<Logintimes> list) {
        this.list = list;
    }

}

这是index实体类，list存放的是从数据库得到的是分页数据集。

public String json() {      
        String message="";
        loginMessageDaoImpl dao=new loginMessageDaoImpl();
        List<Logintimes> list=new ArrayList();
        index index;
        JSONArray array=new JSONArray();
        if(request.getParameter("pageNum")==null){
            index=new index(1,15,dao.allSize());
             JsonConfig config = new JsonConfig();
             config.setExcludes(new String[]{
  "person"});//除去person属性
            index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
            array=JSONArray.fromObject(index,config);
            System.out.println("json:"+array.toString());
            request.setAttribute("index", index);
            message="success";
        }else{                  
        int pageNum=Integer.parseInt(request.getParameter("pageNum"));
        int totalRecord=Integer.parseInt(request.getParameter("totalRecord"));
        int totalPage=Integer.parseInt(request.getParameter("totalPage"));
        index=new index(pageNum,15,totalRecord);        
        index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
        JsonConfig config = new JsonConfig();
        config.setExcludes(new String[]{
  "person"});//除去person属性
        array=JSONArray.fromObject(index,config);
        System.out.println("json:"+array.toString());
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        message=null;
        try {
            response.getWriter().write(array.toString());       
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();                
        }

    }
        return message;
    }

这是前台调用的类。那个判断语句if(request.getParameter(“pageNum”)==null)是用来处理第一次进入页面时需要给页面传的得到的数据库的数据总记录条数。

JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{
  "person"});

你的表中如何含有外键，就需要写这两句，这两句的作用就是在转换json时除去这个外键属性，否则在转换的时候会报错。如果你的表中没有外键，就须吧这两句删除。

前台方面ÿ