2. 程式人生 > >bootstrap實現分頁（例項）

bootstrap實現分頁（例項）

阿新 • • 發佈：2018-12-16

寫前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能程式碼量比較大，所以今天寫一個關於用bootstrap框架分頁的例子，希望以後可以幫助到一些對這方面比較頭疼的碼農。

首先需要明確的一點是，哪些資料是需要分頁的，單從資料顯示上其實是沒有必要分頁的，因為頁面是可以顯示的出來的，但是作為一個相對比較合格的前端，你首先要考慮的不僅僅是這個功能是不是可以實現，而是要考慮使用者體驗是不是好的，在既有功能上如果可以更多的考慮使用者體驗的問題，那麼才可以算是一個相對比較合格的前端工程師。

先看渲染圖：

這個是一個專案中的例子，今天就做以這個為例子，做一下

首先我們將需要用的資料準備好（這個一般是ajax請求到的資料，現在我們直接放到一個js裡面，載入js的時候直接取出資料）

  1. var testboke = {
  2.     "code":200,
  3.     "message":null,
  4.     "data":{
  5.         "total":17,//總條數
  6.         "size":10,//分頁大小-預設為0
  7.         "pages":2,//總頁數
  8.         "current":1,//當前頁數
  9.         "records":[//author-riverLethe-double-slash-note資料部分
  10.             {
  11.                 "id":17,//專案id
  12.                 "userName":"Night夜",//發起人名稱
  13.                 "companyName"
     
    :"康佰裕",//發起人公司名稱
  14.                 "ptypeName":"13",//發起專案類別
  15.                 "pask":"13",
  16.                 "pname":"13",
  17.                 "pdesc":"13"
  18.             },
  19.             {
  20.                 "id":16,
  21.                 "userName":"Night夜",
  22.                 "companyName":"康佰裕",
  23.                 "ptypeName":"12",
  24.                 "pask"
     
    :"12",
  25.                 "pname":"12",
  26.                 "pdesc":"12"
  27.             },
  28.             {
  29.                 "id":15,
  30.                 "userName":"BB機",
  31.                 "companyName":"北京電影",
  32.                 "ptypeName":"11",
  33.                 "pask":"11",
  34.                 "pname":"11",
  35.                 "pdesc":"11"
  36.             },
  37.             {
  38.                 "id":14,
  39.                 "userName":"BB機",
  40.                 "companyName":"北京電影",
  41.                 "ptypeName":"9",
  42.                 "pask":"9",
  43.                 "pname":"9",
  44.                 "pdesc":"9"
  45.             },
  46.             {
  47.                 "id":13,
  48.                 "userName":"BB機",
  49.                 "companyName":"北京電影",
  50.                 "ptypeName":"7",
  51.                 "pask":"7",
  52.                 "pname":"7",
  53.                 "pdesc":"7"
  54.             },
  55.             {
  56.                 "id":12,
  57.                 "userName":"Night夜",
  58.                 "companyName":"康佰裕",
  59.                 "ptypeName":"6",
  60.                 "pask":"6",
  61.                 "pname":"6",
  62.                 "pdesc":"6"
  63.             },
  64.             {
  65.                 "id":11,
  66.                 "userName":"BB機",
  67.                 "companyName":"北京電影",
  68.                 "ptypeName":"5",
  69.                 "pask":"5",
  70.                 "pname":"5",
  71.                 "pdesc":"5"
  72.             },
  73.             {
  74.                 "id":10,
  75.                 "userName":"Night夜",
  76.                 "companyName":"康佰裕",
  77.                 "ptypeName":"4",
  78.                 "pask":"4",
  79.                 "pname":"4",
  80.                 "pdesc":"4"
  81.             },
  82.             {
  83.                 "id":9,
  84.                 "userName":"BB機",
  85.                 "companyName":"北京電影",
  86.                 "ptypeName":"3",
  87.                 "pask":"3",
  88.                 "pname":"3",
  89.                 "pdesc":"3"
  90.             },
  91.             {
  92.                 "id":8,
  93.                 "userName":"Night夜",
  94.                 "companyName":"康佰裕",
  95.                 "ptypeName":"2",
  96.                 "pask":"2",
  97.                 "pname":"2",
  98.                 "pdesc":"2"
  99.             }
  100.         ]
  101.     }
  102. }

接下來畫頁面的表格：

  1. <body>
  2. 			<div class="templatemo-content col-1 light-gray-bg">
  3. 				<div class="templatemo-top-nav-container">
  4. 					<div class="row">
  5. 						<nav class="templatemo-top-nav col-lg-12 col-md-12">
  6. 							<li>
  7. 								<a href="">發起專案列表管理</a>
  8. 							</li>
  9. 						</nav>
  10. 					</div>
  11. 				</div>
  12. 				<!--正文部分-->
  13. 				<div style="background: #E8E8E8;height: 60rem;">
  14. 					<div class="templatemo-content-container">
  15. 						<div class="templatemo-content-widget no-padding">
  16. 							<!--表頭-->
  17. 							<div class="panel-heading templatemo-position-relative">
  18. 								<h2 class="text-uppercase">發起專案列表</h2></div>
  19. 							<div class="panel panel-default table-responsive" id="mainContent">
  20. 							</div>
  21. 						</div>
  22. 					</div>
  23. 				</div>
  24. 				<div class="pagination-wrap" id="callBackPager">
  25. 				</div>
  26. 				<footer class="text-right">
  27. 					<p>Copyright &copy; 2018 Company Name | Designed by
  28. 						<a href="http://www.csdn.com" target="_parent">csdn</a>
  29. 					</p>
  30. 				</footer>	
  31. 	</body>

這個時候也頁面上是沒有任何的元素的，因為我們需要的是將頁面上的表格用js動態的畫出來，這樣才可以實現取出來的資料是可以分頁的，但是畫表格的前提是你要可以拿到資料對不對，所以接下來應該是拿資料，而不是急著畫表格，因為沒有資料的時候你的表格即使是畫出來了，也是顯示不出來的，那麼我們開始拿資料：

我們寫一個函式取資料：

  1. /*將資料取出來*/
  2. 		function data(curr, limit) {
  3. 				//console.log("tot:"+totalCount)
  4. 						/*拿到總資料*/
  5. 				totalCount = testboke.data.total; //取出來的是資料總量
  6. 				dataLIst = testboke.data.records; // 將資料放到一個數組裡面（dataLIst 還未宣告，莫著急）
  7. 				createTable(curr, limit, totalCount);
  8.                 console.log("tot:"+totalCount)
  9. 		}

拿到資料以後怎麼做，分頁，是的，不是急著將資料放到表格裡面，先分頁，ok我們載入分頁的js（bootstrap的分頁js）

  1. 		<linkhref="../../css/font-awesome.min.css"rel="stylesheet" />
  2. 		<linkhref="../../css/bootstrap.min.css"rel="stylesheet" />
  3. 		<linkhref="../../css/templatemo-style.css"rel="stylesheet" />
  4. 		<linkhref="../../css/layui/css/layui.css"rel="stylesheet" />
  5. 		<scriptsrc="../../js/bootstrap.min.js"type="text/javascript"></script>
  6. 		<scriptsrc="../../js/jquery-1.8.3-min.js"type="text/javascript"></script>
  7. 		<scriptsrc="../../js/jquery.min.js"type="text/javascript"></script>
  8. 		<scriptsrc="../../js/extendPagination.js"type="text/javascript"></script>
  9. 		<scriptsrc="../../js/layui/lay/dest/layui.all.js"type="text/javascript"></script>
  10. 		<!--引如測試資料的js-->
  11. 		<scriptsrc="../../js/testcode.js"type="text/javascript"></script>

上面的這些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我們載入資料的js。

下面就是將分頁的程式碼寫上：

  1. var currPage = 1;
  2. 		var totalCount;
  3. 		var dataLIst = [];
  4. 		window.onload = function() {
  5. 			/*取到總條數*/
  6. 			/*每頁顯示多少條  10條*/
  7. 			var limit = 10;
  8. 			data(currPage, limit)
  9. 			//console.log(totalCount)
  10. 			createTable(1, limit, totalCount);
  11. 			$('#callBackPager').extendPagination({
  12. 				totalCount: totalCount,
  13. 				limit: limit,
  14. 				callback: function(curr, limit, totalCount) {
  15. 					data(curr, limit)
  16. 				}
  17. 			});
  18. 		}

載入以後的效果是這樣的：

這個時候就是已經基本將資料處理好了，只是沒有將資料放進去，最後我們將資料放進去就可以了，（我的寫法不建議借鑑，很多現成的迴圈畫表格的方法，我是原生的拼接字串寫的，不嫌麻煩的可以自己拼一下，畢竟不管是什麼框架，最底層的還是這樣的實現原理）

  1. /*建立的是一個表格，並將資料放進去*/
  2. 		function createTable(currPage, limit, total) {
  3. 			var html = [],
  4. 				showNum = limit;
  5. 			if(total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
  6. 			html.push(' <table class="table table-striped table-bordered templatemo-user-table" style="margin-left: 0;">');
  7. 			html.push(' <thead><tr><th>序號</th><th>專案名稱</th><th>類別</th><th>發起人</th><th>單位</th><th>詳情</th><th>操作</th></tr></thead><tbody>');
  8. 			for(var i = 0; i < showNum; i++) {
  9. 				html.push('<tr>');
  10. 				html.push('<td>' + dataLIst[i].id + '</td>');
  11. 				html.push('<td>' + dataLIst[i].pname + '</td>');
  12. 				html.push('<td>' + dataLIst[i].ptypeName + '</td>');
  13. 				html.push('<td>' + dataLIst[i].userName + '</td>');
  14. 				html.push('<td>' + dataLIst[i].companyName + '</td>');
  15. 				html.push('<td><a href="project_details_init.html?id='+dataLIst[i].id+'" class="templatemo-edit-btn">詳情</a></td>');
  16. 				html.push('<td><button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id + ',"1")>同意' +
  17. 					'</button> <button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id + ',"2")>拒絕</button></td>');
  18. 				html.push('</tr>');
  19. 			}
  20. 			html.push('</tbody></table>');
  21. 			var mainObj = $('#mainContent');
  22. 			mainObj.empty();
  23. 			mainObj.html(html.join(''));
  24. 		}

ok，到這裡基本就已經將一個頁面載入資料和分頁處理結束了，是不是很簡單，其實本來就不難，只是很多的時候我們不想去測試，當然中間取資料的地方是ajax來處理的，但是為了給你們舉例子，我只能將ajax那塊取資料的地方直接寫到js裡面，這個資料是動態的，用ajax取資料的時候，然後就是這個分頁其實是後端給資料的時候就已經分好的，我們只是將資料拿到，告訴他頁碼，他給我們對應頁碼的資料，前端如果將所有的資料全部拿出來，是不是不可以分頁呢？不是的，也是可以的，只是這樣的分頁效能會很差，因為每次你拿到的資料都是資料庫查詢所有的資料拿出來的資料，這樣對資料庫的壓力太大了，我們一般叫這種分頁為假分頁。

ok最後簡單的總結一下，分頁其實不難，難在怎麼理解這個思路，我看了很多的分頁的程式碼，有的是原生的js分頁，是可以實現的，但是隻是對於開發者來說是一件得不償失的事情，畢竟前人是給我們提供的有辦法的，我們是沒必要糾結那些，程式碼怎麼簡單快速的實現是最好的方式。

小生不才，有自己的網站搞機族，關於手機的，感興趣的可以看看，交流一下心得。

相關推薦

bootstrap實現分頁（例項）

寫前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能程式碼量比較大，所以今天寫一個關於用bootstrap框架分頁的例子，希望以後可以幫助到一些對這方面比較頭疼的碼農。首先需要明確的一點是，哪些資料是需要分頁的，單從資料顯示上其實是沒有必要分頁的，因為頁面是

PHP、MYSQLI實現分頁（初學者）

php mysqli //求出總條數 假如13條/*需求：每頁只顯示5條 即分三頁* ceil(總條數/每頁顯示數) ceil是向上取整，就算剩一條也要單獨占一頁*/select * from bbs_user limit 0 , 5 這是第一頁 1select * from bbs_u

ssm框架實現分頁（limit）

pojo層新建類PageBean package com.qut.pojo; import java.util.List; public class PageBean<T>{

Python+Selenium 自動化實現例項-處理分頁（pagination）

  場景   對分頁來說，我們最感興趣的是下面幾個資訊 總共有多少頁 當前是第幾頁 是否可以上一頁和下一頁 程式碼 下面程式碼演示如何獲取分頁總數及當前

BootStrap 表格分頁（伺服器客戶端）

伺服器分頁表格  function InitMainTable1 () { //記錄頁面bootstrap-table全域性變數$table，方便應用 var queryUrl = "/XServer/user.do?_

bootstrap分頁（17）

Bootstrap 分頁 本章將講解 Bootstrap 支援的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其他介面元素一樣處理分頁。 分頁（Pagination） 下表列出了 Bootstrap 提供的處理分頁的 class。 Class 描述

電商專案之實現商品分頁（重點）

1、controller層 iProductService.getProductList(pageNum,pageSize); 2、service層 ServerResponse<PageInfo> getProductList(int pageNum, int pageSi

Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分頁（二）

1.引入Bootstrap,優化登入頁面及註冊頁面 先引入bootstrap、jquery、jquery validate檔案和一張背景圖片 注：在引入bootstrap.js之前要先引入jquery 關於bootstrap具體如何使用，請百度學習一下：Bo

django外掛-dj-pagination簡單設定實現分頁（甚至不用在view上寫paginate）

1. 概述 django真的有好多簡單方便好用的輪子！！！ 這次介紹的這個是用於分頁的，django中本身提供了實現分頁的物件，但是每次都要寫一堆業務程式碼，也是神煩。 在django-awesome專案中發現了這個輪子： 文件也很簡單，三四頁的

Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分頁（一）

1.環境介紹 Intellij-IDEA:2017.3.2 JDK:1.8.0_77 Maven:3.5.0 Tomcat:8.5.20 mysql：5.7.19 Intellij-IDEA安裝配置相關連結 2.建立一個maven專案 一步一步往下走就

Angularjs+Bootstrap實現分頁指令

效果圖 博客 要求 config 大小 cti 說明 cal 自己 　　本插件的開發目的主要給前端同學使用，本人是專註於後臺開發的，對css樣式不熟悉，但逼於前端要求做一個共公組件方便日常開發，所以這個插件在樣式上可能不適合大部分人，喜歡的拿走吧，不喜歡的也請別噴。 一

bootstrapTable分頁（一）

bootstrapTable分頁 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap-table-demo-分頁</t

js+bootstrap實現分頁、頁碼跳轉

製作page.jsp，在其他頁碼引入，只需把最外層的form標籤的id設定為myForm； 其中　　totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁 <%@ page language="jav

Linux kernel boot process——從真實模式（real mode）到保護模式（protected mode），再到分頁（paging）

        本文簡要介紹X86-32架構下的Linux kernel被boot loader（如grub）載入到記憶體後，如何從最初的真實模式，切換到保護模式，並開啟分頁機制。本文不涉及boot loader如何將核心載入到記憶體，因為這是boot loader的事，跟

Linux kernel boot process——從真實模式（real mode）到保護模式（protected mode），再到分頁（paging） .

       本文簡要介紹X86-32架構下的Linux kernel被boot loader（如grub）載入到記憶體後，如何從最初的真實模式，切換到保護模式，並開啟分頁機制。本文不涉及boot loader如何將核心載入到記憶體，因為這是boot loader的事，跟核

jquery+bootstrap 實現簡單備忘錄（一）

寫在前面的話 經過這一個星期的努力，我終於把這個簡陋的tudolist做出來了。（好吧，我承認是自己比較菜。） 通過寫部落格的方式，我想把這一個星期裡來除錯的收穫和對程式設計的感悟記錄

Django分頁（一）

create return res iou span end 開始 引入 class Django分頁（一） 手動實現簡單分頁 HTML <!DOCTYPE html> <html lang="en"> <h

Django分頁功能快速實現（例項）

分頁前 專案工程 django views.py設計 from django.shortcuts import render from django.views import View # Create your views here.

jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁

height var 實現 before 狀態 pin 好的 調用 是否 首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script>同時也要引入 <link r

myBatis學習筆記（10）——使用攔截器實現分頁查詢

條件 iba execute rri itl alias property gen func 1. Page package com.sm.model; import java.util.List; public class Page<T&g