day8 SSM項目實現分頁功能

碎碎念

今天上午的主要內容是分頁。在沒有框架的時候,分頁是一個非常麻煩的事,分頁一個功能就能寫賊多的代碼。而現在我們的直接用框架,實現起來就非常地簡單。
下午的主要內容就是寫簡歷和學習一下bootstrap,我們組由我負責前端,因爲沒有什麼基礎,還是需要去學習一下。
這裏爲大家推薦一個bootstrap的模板(收費,但不貴)bootstrapmb

SSM項目實現分頁功能

本次實現分頁的方式:前臺選擇相對應的操作(如首頁、下一頁等),點擊的同時傳遞參數到後臺,後臺通過接受的參數調用相應的方法實現分頁。(本次分頁基於SSM項目搭建成功的情況下)
SSM項目搭建–數據庫的增刪改查

  1. 在pom.xml文件中導入pagehelper的包
<dependency>
   <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.2</version>
</dependency>
  1. 在applicationContext.xml文件中爲sqlsessionfactroy加入以下配置。爲下面的plugins的property。
    <!-- 3.配置SqlSessionFactory對象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入數據庫連接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 掃描bean包 使用別名 -->
        <property name="typeAliasesPackage" value="com.suelta.bean"></property>

        <!--配置加載映射文件 UserMapper.xml-->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>

        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <!--設置用的哪個數據庫-->
                            <prop key="helperDialect">mysql</prop>
                            <!--設置默認爲可以處理頁面異常-->
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>
  1. 在使用pagehelper進行分頁之前,我們看看pagehelper的相關屬性。這裏主要關注size,pageNum,pages,list這幾個參數。
    	//當前頁  
        private int pageNum;  
        //每頁的數量  
        private int pageSize;  
        //當前頁的數量  
        private int size;  
        //由於startRow和endRow不常用,這裏說個具體的用法  
        //可以在頁面中"顯示startRow到endRow 共size條數據"  
      
        //當前頁面第一個元素在數據庫中的行號  
        private int startRow;  
        //當前頁面最後一個元素在數據庫中的行號  
        private int endRow;  
        //總記錄數  
        private long total;  
        //總頁數  
        private int pages;  
        //結果集  
        private List<T> list;  
      
        //第一頁  
        private int firstPage;  
        //前一頁  
        private int prePage;  
      
        //是否爲第一頁  
        private boolean isFirstPage = false;  
        //是否爲最後一頁  
        private boolean isLastPage = false;  
        //是否有前一頁  
        private boolean hasPreviousPage = false;  
        //是否有下一頁  
        private boolean hasNextPage = false;  
        //導航頁碼數  
        private int navigatePages;  
        //所有導航頁號  
        private int[] navigatepageNums;  
  1. 這一過程我們分三步,因爲我們是通過前臺傳遞的參數來確定是哪一頁分頁和每一頁所展示的數據量。所以,(1)我們在Controller層使用page和size來接收前端傳來的數據。Controller層調用service層,故將值往下傳,(2)並在service層所調用的函數中,加入**PageHelper.startPage(page,size);**即可。(3)最後通過在Controller層使用PageInfo,對其初始化,並傳給ModelAndView中即可(是不是很簡單)

下面是Controller層的函數
在這裏插入圖片描述
下面是service層
在這裏插入圖片描述

	//下面的函數是Controller層
    @RequestMapping("/findAll.do")
    public ModelAndView findAll(@RequestParam(defaultValue = "1")int page, @RequestParam(defaultValue = "4")int size){
        List<Userinfo> userinfos = userService.findAll(page,size);
        PageInfo pageInfo = new PageInfo(userinfos);
        ModelAndView mv = new ModelAndView();
        mv.addObject("pageInfo",pageInfo);
        mv.setViewName("user-list");
        return mv;
    }
    
	//下面的函數是Service層
	    @Override
    public List<Userinfo> findAll(int page,int size) {
        //這裏調用startPage進行分頁
        PageHelper.startPage(page,size);
        return userDao.findAll();
    }
  1. 下面爲前端的頁面代碼。通過**${pageContext.request.contextPath}/user/findAll.do?page=1&size=5**來實現傳值。
    pageInfo.pages代表總頁數;
    pageInfo.pageNum代表當前頁碼;
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首頁</a></li>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum-1}&size=5">上一頁</a></li>
<c:forEach begin="1" end="${pageInfo.pages}" var="pagenum">
   <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pagenum}&size=5">${pagenum}</a> </li>
</c:forEach>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum+1}&size=5">下一頁</a></li>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pages}&size=5" aria-label="Next">尾頁</a></li>
   		

完成上述操作即可完成分頁。效果圖如下:

在這裏插入圖片描述如有問題,歡迎留言討論

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章