歡迎訪問昆山寶鼎軟件有限公司網站! 設為首頁 | 網站地圖 | XML | RSS訂閱 | 寶鼎郵箱 | 后臺管理
?

新聞資訊

MENU

軟件開發知識

省略號在列表前部的第 昆山軟件定制開發 二個位置出現; 其余情況

點擊: 次  來源:寶鼎軟件 時間:2017-06-01

原文出處: waylau

實際上分頁器可能分頁組件在現實中都有遍及著的應用,照理來說老衛沒有須要單獨撰文來提這茬。事實是,我近期恰虧得寫一門關于Spring Data、Thymeleaf 3、Bootstrap 4 的應用課程,所以用了Bootstrap 4的樣式,功效之前許多譬喻 Bootstrap 3 的表格、分頁器啊之類的插件都不能很好的兼容,百度谷歌無果,并且 Bootstrap 4 還沒有出不變版本,官網的示例也是少的可憐,最終下刻意要本身寫個分頁器了,所用到的技能就是 Spring Data、Thymeleaf 3、Bootstrap 4 。

分頁器有哪些需求

中國式報表從來都是最巨大的,隨之衍生而來的分頁器要求也是錯綜巨大。本例為求把分頁器道理匯報給各人,所以,將分頁組件的抽象為以下通用的內容:

  • 顯示頁碼的列表;
  • 該列表的第一項是“上一頁”,最后一項是“下一頁”;
  • 當前選中的頁碼要高亮;
  • 當當前頁的上一頁沒有頁碼可選時,則“上一頁”置為不行點擊的狀態;
  • 當當前頁的下一頁沒有頁碼可選時,則“下一頁”置為不行點擊的狀態;
  • 我們很容易就能找到一個 Bootstrap 分頁器的設計原型,如下圖:

    省略號在列表前部的第 昆山軟件定制開拓 二個位置呈現; 其余環境

    你可以參考 Bootstrap 官網的先容 http://getbootstrap.com/components/#pagination,但發起你不要直接用上面的樣式,因為這個樣式是 Bootstrap 3版本的。 最后,勞務派遣管理系統,我找到的了Bootstrap 4 內里的樣式,卻不在官網 http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_pagination.cfm。感激 books-collection 項目帶給措施員的開源、免費圖書薈萃!

    Spring Data 能做什么

    org.springframework.data.domain.Page 是 Spring Data 提供的一個分頁器接口,勞務派遣管理系統,提供了常用的要領,軟件開發,好比:

  • List getContent(); // 返回分頁后的數據的列表
  • int getTotalPages(); // 總頁數
  • long getTotalElements(); // 總數據量
  • boolean isFirst(); // 是否是第一個數據;
  • boolean isLast(); // 是否是最后一個數據;
  • int getNumber(); // 當前頁面索引
  • 結構一個 Page,凡是需要傳入一個 org.springframework.data.domain.PageRequest.PageRequest工具,所需參數為 (int page, int size),個中 page 就是 要請求的頁面的索引,size 是頁面的巨細(一頁最多有幾多個數據)。

    Spring Data 可以說提供了我們前端分頁器所需要的所有元素了。

    Thymeleaf 牛刀小試

    Thymeleaf 作為模版引擎,其長處就是可以綁定命據源,而且按照數據源來渲染頁面。最爽的莫過于按照綁定的數據列表來遍歷生成頁面元素,好比:

    <ul class="pagination" >
    	<!-- 上一頁 -->
    	<li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
    		<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
    			<span aria-hidden="true">?</span>
    		</a>
    	</li>
    	
    	<!-- 迭代生成頁碼 -->
    	<li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPages)}" 
    		data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
    		<a class="page-link" data-th-attr="pageIndex=${i} - 1" href="javascript:void(0);">
                 <span data-th-text="${i}"></span>
            </a>
    	</li>
    	
    	<!-- 下一頁 -->
    	<li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
    		<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
    			<span aria-hidden="true">?</span>
    		</a>
    	</li>
    </ul>

    這個就是簡樸版本的分頁器了,可以看到我們的分頁器的“上一頁”和“下一頁”是牢靠穩定的,中間按照 totalPages(總頁數)來動態生成頁面。同時,我們按照是否是當前頁(number + 1)來配置樣式是否高亮(active)?!吧弦豁摗焙汀跋乱豁摗笔切枰鲆幌屡卸ǖ?,若當前頁是第一頁(first)則“上一頁”不能點擊(disabled);假如當前頁是最后一頁(last)則“下一頁”不能點擊(disabled)。

    思量的再多一點

    實際上,上面版本可以應付大大都的應用場景了??墒?,大概會有點不完美,好比,我的頁數許多怎么辦?那么我們的分頁列表大概被拉得很長了,率領們大概會不滿足的!絕對要把這種不滿足的情緒抹殺在搖籃里。

    排列三305组选前后关系 北京十一选五遗漏 浙江11选五出球顺序 股票涨跌关系 pk10押235689稳赢技巧 排列三开奖数据 今晚精准四不像一肖图 年线怎么看 浙江十一选五技巧选号 一分时时彩计划最准 澳洲快乐8开奖记录