springmvc实现分页功能

约定不等于承诺〃 2022-05-24 01:18 378阅读 0赞

### 最近在做一个分享圈项目，采用ssm实现。要实现关键字查询，全部分享，别人的分享，我的分享，正常查询等几个操作查询出来的数据同时用同一个分页按钮进行操作，根据不同的操作指令分页显示其查询出来的数据，防止点击下一页时数据显示就不是该指令操作查询出来的数据，变为了正常查询出来的数据。 ###

实现思路：其实就是一些参数的传输，无论哪种操作，只要保证点击分页按钮时再把该操作的条件参数传到后台，后台根据获取到的参数进行查询，返回查询到的数据就行。要保证每个不同操作点击下一页传输相应的查询参数就得每次操作后都要把传输到后台的数据进行回显到前端页面，保存起来，等再点击分页按钮时，获取该参数再传输到后台。

![70][]

![70 1][]

实现步骤：

前端页面：

<div class="widget widget_search">
        <form class="navbar-form" action="<%=request.getContextPath()%>/user/selectPage" method="post">
            <div class="input-group">
        //用于保存操作的回显数据
           <input type="hidden" name="user_id" id="user_id" value="${page.userid}"/>
                <input type="hidden" name="other_id" id="other_id" value="${page.otherid}"/>
                <input type="text" name="keyWord" id="keyword" value="${page.keyWord}" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
                <span class="input-group-btn">
                    <select name="keyType" id="key_type" class="btn btn-default btn-search">
                        <option value="userid" <c:if test="${page.keyType=='userid'}">selected="selected"</c:if> >userid</option>
                         <option value="content" <c:if test="${page.keyType=='content'}">selected="selected"</c:if> >content</option>
                    </select>
                </span>
                <span class="input-group-btn">
              <button class="btn btn-default btn-search" name="search" type="submit" onclick="search()">搜索</button>
          </span>
            </div>
        </form>
    </div>

<div class="more">
        <a href="<%=request.getContextPath()%>/user/selectPage" title="全部分享" >全部分享</a>
        <a href="<%=request.getContextPath()%>/user/selectPage?otherid=user10@qq.com" title="别人的分享" >别人的分享</a>
        <a href="<%=request.getContextPath()%>/user/selectPage?userid=user10@qq.com" title="我的分享" >我的分享</a>
        <a href="<%=request.getContextPath()%>/user/publishContent" title="发布分享" >发布分享</a>
    </div>

<nav class="pagination" >
        <ul>
            <li id="present" value="${page.page}">当前页：${page.page}</li>
    
            <li class="active"><a onclick="selectPage(1)>1</a></li>
        <li class="pages" ><a id="pres" id="${page.page-1}" onclick="selectPage(this.id)">上一页</a></li>
    
            <li class="pages" ><a  id="next"id="${page.page+1}" onclick="selectPage(this.id)">下一页</a></li>
    
            <li class="active"><a onclick="selectPage(${page.totalPage})>尾页</a></li>
    
                    <li><span>共 ${page.totalPage}页</span></li>
                    </ul>
                    </nav>

用jquery来保证每个操作的参数传输，不想要别人知道传输的数据，所以用post.

//用post方式把数据传到后台springmvc
    function httpPost(URL,PARAMS) {
        var temp=document.createElement("form");
        temp.action=URL;
        temp.method="post";
        temp.style.display="none";
    
        for(var x in PARAMS){
            var opt=document.createElement("input");
            opt.name=x;
            opt.value=PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
    }
    
    
    //删除的操作
    function deleteContent(id) {
        var params={
            id:id
        };
        //springmvc后台接收的路径
        var url='deleteContent';
        httpPost(url,params);
    }
    
    //分页的操作
    function selectPage(id) {
    
        //模糊查询的类型
        var keyType=$("#key_type option:selected").val();
        //进行模糊查询的关键字
        var keyword=$("#keyword").val();
        //当前用户的id,用来查询我的分享
        var  userid=$("#user_id").val();
        //用来记录别人分享的id，用来查询别人的分享
        var  otherid =$("#other_id").val();
        //获取当前的页数
        var page=$("#present").val();
        //传到后端的页数
        var pages;
        if(id=='pres'){
            pages=page-1;
        }else{
            pages=page+1;
        };
    
        var params={
            keyType:keyType,
            keyWord:keyword,
            userid:userid,
            otherid:otherid,
            page:pages
        };
        //springmvc后台接收的路径
       var  url='selectPage';
        httpPost(url,params);
    
    }

springmvc接收数据，进行查询操作

/**
     * 分页查询
     * @param page
     * @param model
     * @return
     */
    @RequestMapping("/selectPage")
    public String selectPage(Page page,Model model){
        System.out.println("selectpage:"+page.toString());
    
        List<Content>listContent=contentService.selectPageList(page);
        if (listContent!=null&&listContent.size()>0){
            for ( Content content:listContent){
                System.out.println(content.toString());
            }
        }
        int totals=contentService.selectPageCount(page);
        page.setTotalRecord(totals);
        System.out.println("page:"+page.toString());
        model.addAttribute("listContent",listContent);
        model.addAttribute("page",page);
        return "index";
    }

因为我用Page类封装了要进行分页的参数

package net.stxy.one.model;
    
    import java.io.Serializable;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * 处理分页
     * Created by ASUS on 2018/5/7
     *
     * @Authod Grey Wolf
     */
    
    
    
    public class Page implements Serializable {
    
    
        //当前页
        private Integer page=1;
        //页大小
        private Integer rows=5;
        // 总记录 数
        private Integer totalRecord;
        //总页数
        private Integer totalPage;
        //关键字类型
        private String keyType;
        //查询关键字
        private String keyWord;
        //开始记录位置
        private Integer start;
        //用户id
        private String userid;
        //其他用户id
        private String otherid;
    
        public String getKeyType() {
            return keyType;
        }
    
        public void setKeyType(String keyType) {
            this.keyType = keyType;
        }
    
        public String getOtherid() {
            return otherid;
        }
    
        public void setOtherid(String otherid) {
            this.otherid = otherid;
        }
    
        public String getUserid() {
            return userid;
        }
    
        public void setUserid(String userid) {
            this.userid = userid;
        }
    
        public Integer getPage() {
            return page;
        }
    
        public void setPage(Integer page) {
            this.page = page;
        }
    
        public Integer getRows() {
            return rows;
        }
    
        public void setRows(Integer rows) {
            this.rows = rows;
        }
    
        public Integer getTotalRecord() {
            return totalRecord;
        }
    
        public void setTotalRecord(Integer totalRecord) {
            this.totalRecord = totalRecord;
        }
    
        public Integer getTotalPage() {
            totalPage=(totalRecord-1)/rows+1;
            return totalPage;
        }
    
        public void setTotalPage(Integer totalPage) {
    
            this.totalPage = totalPage;
        }
    
        public String getKeyWord() {
            return keyWord;
        }
    
        public void setKeyWord(String keyWord) {
            this.keyWord = keyWord;
        }
    
        public Integer getStart() {
            start=(page-1)*rows;
            return start;
        }
    
        public void setStart(Integer start) {
    
            this.start = start;
        }
    
       
        public Page() {
        }
    
        public Page(Integer page, Integer rows, Integer totalRecord, Integer totalPage, String keyType, String keyWord, Integer start, String userid, String otherid) {
            this.page = page;
            this.rows = rows;
            this.totalRecord = totalRecord;
            this.totalPage = totalPage;
            this.keyType = keyType;
            this.keyWord = keyWord;
            this.start = start;
            this.userid = userid;
            this.otherid = otherid;
        }
    
        @Override
        public String toString() {
            return "Page{" +
                    "page=" + page +
                    ", rows=" + rows +
                    ", totalRecord=" + totalRecord +
                    ", totalPage=" + totalPage +
                    ", keyType='" + keyType + '\'' +
                    ", keyWord='" + keyWord + '\'' +
                    ", start=" + start +
                    ", userid='" + userid + '\'' +
                    ", otherid='" + otherid + '\'' +
                    '}';
        }
    }

根据参数不同查询不同的数据，mapper的sql语句：

<select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
      select
      <include refid="Base_Column_List" />
      from content
      <where>
        <if test="userid!=null and userid !=''">AND  userid = #{userid}</if>
        <if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT  userid FROM  content where userid = #{otherid} )</if>
        <if test="keyWord!='' and keyType=='userid' ">
           AND userid like '%' #{keyWord} '%'
        </if>
        <if test="keyWord!='' and keyType=='content' ">
           AND content like '%' #{keyWord} '%'
        </if>
    
      </where>
      order by id DESC
      limit #{start},#{rows}
    </select>
    
    
    <select id="selectPageCount" parameterType="net.stxy.one.model.Page"  resultType="java.lang.Integer">
      select count(1) from content
        <where>
          <if test="userid!=null and userid !=''">AND  userid = #{userid}</if>
          <if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT  userid FROM  content where userid = #{otherid} )</if>
          <if test="keyWord!='' and keyType=='userid' ">
            AND userid like '%' #{keyWord} '%'
          </if>
          <if test="keyWord!='' and keyType=='content' ">
             AND content like '%' #{keyWord} '%'
          </if>
        </where>
    </select>

注：sql语句不要写成select \* from xxx表，userid !=otherid,这些写法是进行全表搜索的，导致搜索速度慢，性能不好。

我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70][]

[70]: /images/20220524/f4a322ecb2a54296946bbbdc5f7719f2.png
[70 1]: /images/20220524/4b0b00b729184861bc6c66e9b976f2c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70]: /images/20220524/dab95ab8b8f64037a6612ef8b62d230d.png