bootstrap圖片大小設置方法「bootstrap上傳圖片插件」

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

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

先看渲染圖：

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

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

var testboke = {
 "code":200,
 "message":null,
 "data":{
 "total":17,//總條數
 "size":10,//分頁大小-默認為0
 "pages":2,//總頁數
 "current":1,//當前頁數
 "records":[//author-riverLethe-double-slash-note數據部分
 {
 "id":17,//項目id
 "userName":"Night夜",//發起人名稱
 "companyName":"康佰裕",//發起人公司名稱
 "ptypeName":"13",//發起項目類別
 "pask":"13",
 "pname":"13",
 "pdesc":"13"
 },
 {
 "id":16,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"12",
 "pask":"12",
 "pname":"12",
 "pdesc":"12"
 },
 {
 "id":15,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"11",
 "pask":"11",
 "pname":"11",
 "pdesc":"11"
 },
 {
 "id":14,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"9",
 "pask":"9",
 "pname":"9",
 "pdesc":"9"
 },
 {
 "id":13,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"7",
 "pask":"7",
 "pname":"7",
 "pdesc":"7"
 },
 {
 "id":12,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"6",
 "pask":"6",
 "pname":"6",
 "pdesc":"6"
 },
 {
 "id":11,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"5",
 "pask":"5",
 "pname":"5",
 "pdesc":"5"
 },
 {
 "id":10,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"4",
 "pask":"4",
 "pname":"4",
 "pdesc":"4"
 },
 {
 "id":9,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"3",
 "pask":"3",
 "pname":"3",
 "pdesc":"3"
 },
 {
 "id":8,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"2",
 "pask":"2",
 "pname":"2",
 "pdesc":"2"
 }
 ]
 }
}

接下來畫頁面的表格：

<body>
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-top-nav-container">
					<div class="row">
						<nav class="templatemo-top-nav col-lg-12 col-md-12">
							<li>
								<a href="">發起項目列表管理</a>
							</li>
						</nav>
					</div>
				</div>
				<!--正文部分-->
				<div style="background: #E8E8E8;height: 60rem;">
 
					<div class="templatemo-content-container">
						<div class="templatemo-content-widget no-padding">
							<!--表頭-->
							<div class="panel-heading templatemo-position-relative">
								<h2 class="text-uppercase">發起項目列表</h2></div>
							<div class="panel panel-default table-responsive" id="mainContent">
 
							</div>
						</div>
					</div>
				</div>
 
				<div class="pagination-wrap" id="callBackPager">
				</div>
				<footer class="text-right">
					<p>Copyright © 2018 Company Name | Designed by
						<a href="http://www.csdn.com" target="_parent">csdn</a>
					</p>
				</footer>	
	</body>

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

我們寫一個函數取數據：

/*將數據取出來*/
		function data(curr, limit) {
				//console.log("tot:"+totalCount)
						/*拿到總數據*/
				totalCount = testboke.data.total; //取出來的是數據總量
				dataLIst = testboke.data.records; // 將數據放到一個數組裡面（dataLIst 還未聲明，莫著急）
				createTable(curr, limit, totalCount);
 console.log("tot:"+totalCount)
		}

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

		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/bootstrap.min.css" rel="stylesheet" />
		<link href="../../css/templatemo-style.css" rel="stylesheet" />
		<link href="../../css/layui/css/layui.css" rel="stylesheet" />
		
		<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
		<script src="../../js/jquery-1.8.3-min.js" type="text/javascript"></script>
		<script src="../../js/jquery.min.js" type="text/javascript"></script>
		<script src="../../js/extendPagination.js" type="text/javascript"></script>
		<script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript"></script>
		<!--引如測試數據的js-->
		<script src="../../js/testcode.js" type="text/javascript"></script>

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

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

var currPage = 1;
		var totalCount;
		var dataLIst = [];
		window.onload = function() {
			/*取到總條數*/
			/*每頁顯示多少條 10條*/
			var limit = 10;
			data(currPage, limit)
			//console.log(totalCount)
			createTable(1, limit, totalCount);
			$('#callBackPager').extendPagination({
				totalCount: totalCount,
				limit: limit,
				callback: function(curr, limit, totalCount) {
					data(curr, limit)
				}
			});
		}

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

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

/*創建的是一個表格，並將數據放進去*/
		function createTable(currPage, limit, total) {
			var html = [],
				showNum = limit;
			if(total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
			html.push(' <table class="table table-striped table-bordered templatemo-user-table" style="margin-left: 0;">');
			html.push(' <thead><tr><th>序號</th><th>項目名稱</th><th>類別</th><th>發起人</th><th>單位</th><th>詳情</th><th>操作</th></tr></thead><tbody>');
 
			for(var i = 0; i < showNum; i++) {
				html.push('<tr>');
				html.push('<td>' + dataLIst[i].id + '</td>');

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/208963.html