JavaWeb——【小技巧】——如何实现数据分页

前言

在做项目的时候，总会因数据量过多而一页显示不了，所以需要进行分页的操作。
那么分页要怎么来分呢？博主会在这篇博文里进行讲解。

技术要求

下方文章会用到的技术用HTML、Js、AJAX、SSM等关键技术，尤其是SMM与AJAX。
分页条的前端代码：

<nav class="pull-right">
    <ul class="pagination" id="paging_toolbar">
        <li><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
        <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
        <li class=""><a href="#">2<span class="sr-only">(current)</span></a></li>
        <li class=""><a href="#">3<span class="sr-only">(current)</span></a></li>
        <li class=""><a href="#">4<span class="sr-only">(current)</span></a></li>
        <li class=""><a href="#">5<span class="sr-only">(current)</span></a></li>
        <li class="disabled"><a href="#" aria-label="Previous"><span
                aria-hidden="true">下一页</span></a></li>
    </ul>
</nav>

效果图是这样，用的普通的HTML、CSS技术，不多讲了，主要是讲后端逻辑。

1.现在假设一页分5条数据，那么我们根据下方的那个1、2、3、4等等的分页条来获取"当前页数"currentPage
2.编写一个函数使用ajax异步技术把"当前页数"传递到后台
3.再对数据库利用limit函数进行分页操作，仅获取当前页的数据（不理解limit的可以去百度奥，很简单的一个原理）
4.把dao返回的集合重返到前端页面

流程走一遍啊，假设我点击1，也就是把1传到后端，后端调用dao进行分页，获取从第一页的从1到5的5条数据出来，再传给前端进行显示这5条数据。

这样说可以理解了吗？

还是不行的话博主再费点力气画个图吧！

具体代码

前端

function loadPage(currentPage){
    $.ajax({
        url:"/findCultureByUser",
        dataType : "json",
        contentType:'application/json;charset=utf-8',
        data:{"currentPage":currentPage},
        type:"get",
        success:function (result) {
            if (result.code == "200") {
                //没有数据
                if (result.data == null) {
                    $("#tb_article").html("<tr><td class='text-center' colspan=\"7\">没有数据</td></tr>");
                    return;
                }

                // 表格列表
                var tbTxt = "";
                for (var i = 0; i < result.data.length; i++) {
                    var article = result.data[i];
                    var div = "<tr>\n" +
                        "<td><input type='text' value='"+article.cul_id+"'/></td>"+
                        "                                    <td>" + article.cul_title + "</td>" +
                        "                                    <td>" + article.cul_content + "</td>" +
                        "                                    <td>" + article.cul_description + "</td>" +
                        /*   "                                    <td>" + article.status + "</td>" + */
                        "                                    <td>" + article.cul_readamount + "</td>" +
                        /*     "                                    <td>" + article.allow_comment + "</td>" + */
                        "                                    <td>" + article.cul_publishdate + "</td>" +
                        "                                    <td>" + article.cul_modifydate + "</td>" +
                        "                                    <td>" + article.user_province + "</td>";
                    //"                                    <td ><button class='btn btn-sm btn-primary' onclick='showCategoryModel(" + article.aid + ")'>所属分类</button></td>";


                    //是否允许评论
                    if (article.cul_comment == 0) {
                        div += "<td><span class='label label-default'>拒绝</span></td>";
                    } else if (article.cul_comment == "1") {
                        div += "<td><span class='label label-success'>允许</span></td>";
                    }


                    //文章状态
                    if (article.cul_status == 1) {
                        div += "<td><span class='label label-success'>已发布</span></td>";
                    } else {
                        div += "<td><span class='label label-default'>草稿</span></td>";
                    }

                    div +=
                        "                                    <td>" +
                        "                                        <button class='btn btn-primary btn-sm waves-effect waves-light m-b-5' onclick='editArticle(" + article.cul_id + ")'>编辑</button>" +
                        "                                        <button class='btn btn-danger btn-sm waves-effect waves-light m-b-5' onclick='deleteArticle(" + article.cul_id + "," + 1 + ")'>删除</button>" +
                        "                                        <button class='btn btn-warning btn-sm waves-effect waves-light m-b-5' onclick='preview(" + article.cul_id + ")'>预览</button>" +
                        "                                    </td>" +
                        "                                </tr>";
                    tbTxt += div;
                }
                $("#tb_article").html(tbTxt);

                //分页条
                var $paging_toolbar = $("#paging_toolbar");
                var paging_toolbarTxt = "<li class='disabled'><a href='#'>第" + result.page.currentPage + "页 / 共" + result.page.pageTotal + "页</a></li>";

                //如果当前是第一页，那么【上一页】按钮不可点击
                if (currentPage == 1) {
                    paging_toolbarTxt += "<li class='disabled'><a href='#'>上一页</a></li>";
                } else {
                    paging_toolbarTxt += "<li onclick='loadPage(" + (currentPage - 1) + ")'><a href='#'>上一页</a></li>";
                }
                //遍历生成页码
                for (var i = 1; i <= result.page.pageTotal; i++) {
                    if (result.page.currentPage == i) {
                        paging_toolbarTxt += "<li onclick='loadPage(" + i + ")' class='active'><a href='#'>" + i + "</a></li>";
                    } else {
                        paging_toolbarTxt += "<li onclick='loadPage(" + i + ")' ><a href='#'>" + i + "</a></li>";
                    }
                }
                //如果当前是最后一页，那么【下一页】按钮不可点击
                if (currentPage == result.page.pageTotal) {
                    paging_toolbarTxt += "<li class='disabled'><a href='#'>下一页</a></li>";
                } else {
                    paging_toolbarTxt += "<li onclick='loadPage(" + (currentPage + 1) + ")'><a href='#'>下一页</a></li>";
                }
                $paging_toolbar.html(paging_toolbarTxt);

            }else {
                tale.alertError(result.msg || '获取文章列表失败');
            }
        }
    });
}

controller
这里就是通过springmvc的注解实现的接受请求以及用responsebody注解实现不走视图解析器，直接返回原页面。（如果听不懂，可以去学习一下springmvc，或者跳过，了解原理就行），返回的是调用的service里的findCutureById方法

    //通过id获取文章
    @ResponseBody
    @RequestMapping("/findCultureById")
    public Result findArticleById(@RequestParam("aid") String aid){
       return cultureService.findCutureById(Integer.parseInt(aid));
    }

service
主要就是那句调用dao的，其他的都是博主的项目功能需要的而已。

    //根据cul_id查找culture
    public Result findCutureById(int aid){
        //创建结果集
        Result result = new Result();
        try{
            //调用dao查询文章
            Culture culture = cultureMapper.selectCultureById(aid);
            //获取文章阅读数量
            int cul_readamount = culture.getCul_readamount();
            //阅读数量+1
            cultureMapper.addReadAmount(aid,cul_readamount+1);
            //创建article对象
            Article article = new Article();
            article.setCulture(culture);
            //结果集添加数据
            result.setData(article);
            //结果集添加code
            result.setCode(Resource.SUCCESS);
        }catch (Exception e){
            e.printStackTrace();
        }
        return result;
    }

dao
进行查询操作，基础的sql语句

@Select("select * from user a,culture_comment b where a.user_id = b.user_id and b.cul_id = #{aid} limit #{p},"+Resource.PAGETOTAL)
public ArrayList<Cul_Com> selectCommentByAid(@Param("aid") int aid,@Param("p") int p);

Result工具类
就是一个固定的结果集类，用于ajax请求的返回数据存储。

package com.myweb.common;

public class Result {
    private String code;
    private String msg;
    private Object data;
    private Pagion page;
    private Pagion2 page2;

    public Pagion2 getPage2() {
        return page2;
    }

    public void setPage2(Pagion2 page2) {
        this.page2 = page2;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

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

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public Pagion getPage() {
        return page;
    }

    public void setPage(Pagion page) {
        this.page = page;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code='" + code + '\'' +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                ", page=" + page +
                ", page2=" + page2 +
                '}';
    }
}

总结

使用的MCV技术，常规的html->controller->service->dao流程，在此基础上包装了ssm的框架，主要是使用ajax交互异步请求响应以及sql的limit关键字，再利用js或者jquery把返回的数据重新写为html，进行替换显示。