純手寫完美實現前端分頁效果
經常聽人提到前端分頁技術,卻總也沒有完全的實現過,作為做過多年前後端的老碼工,真的有必要好好研究一番,以饗讀者;
在這裡不只是有前端分頁頁面效果,更有真實資料的展示,實現了真正的分頁哦!
- 內容導讀
1.頁面設計
2.jQuery之ajax與JSON資料
3.執行效果
說明 :
(1)需要將原始碼匯入HBuilder中,開啟HBuilder直接通過內建伺服器執行頁面即可實現分頁效果
(2)一個分頁小技術有時也是讓人撓頭,這裡完全前端實現方式與Java的實現方式,我們提供給你完全的編碼參考,希望能夠幫到你哦(:)!
(3)加QQ群: 657540173 免費下載原始碼
一 .頁面設計
<!-- 前端分頁完美實現 -->
<div class="wrap">
<table id="info" border="2" cellspacing="0" cellpadding="0">
<caption>資訊分頁查詢系統</caption>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</table>
</div>
<p class="go">第<span id="now">1</span>頁 共<span id="total">5</span>頁
<button id="start">首頁</button>
<button id="first">上一頁</button><button id="next">下一頁</button>
<button id="end">尾頁</button>跳轉到<input id="inp" type="text" />
<button id="go">GO</button>
</p>
</body>
<!---超客學堂chaoke.ke.qq.com加群657540173免費領取更多--->
<script src="js/jqmin.js" type="text/javascript">
</script>
<script src="js/fenye.js" type="text/javascript">
</script>
</html>
二.jQuery之ajax與JSON資料
1.jQuery之ajax請求
// 超客學堂chaoke.ke.qq.com加群657540173免費領取更多
$(function() {
///當前頁數
var nowPage = 1;
///總的頁數
var totalPage = 4;
////每行限制數///
var limitRows = 4;
/////總的行數
var totalRows = 0;
////開始的行數
var startRows = 0;
////結束的行數,在資料庫中是用limit實現的,不需要此變數
var endRows = 4;
////存所有行的陣列
var list = new Array();
///////找表格元素及其它各元素///////
var tab = $('#info');
var now = $('#now');
var total = $('#total');
///////1.初始化資料,運用jQuery的get請求///////
$.get('json/my.json', function(data, stauts) {
///獲取所需資料/////
///獲取最大頁數,js除時要取小數,此處要取整
var tg = Math.floor(data.length / limitRows);
if (Math.floor(data.length % limitRows) == 0) {
totalPage = tg;
} else {
totalPage = tg + 1;
}
///存入到陣列////
list = data;
/////初始化顯示資料///
now.html(nowPage);
total.html(totalPage);
disp(nowPage, list);
});
// ///2.按頁號顯示資料
function disp(n, d) {
///先刪除之前的,再建立新的
$("tr").remove(".hqy");
////求每頁從1開始,要得到陣列開始下標要減一為從0開始
startRows = (n - 1) * limitRows;
endRows = startRows + limitRows;
for (var i = startRows; i < endRows; i++) {
var t = "<tr class='hqy'>" + "<td>" + (101 + i) + "</td>" +
"<td>" + d[i].name + "</td>" +
"<td>" + d[i].age + "</td>" + "</tr>"
tab.append(t);
} //for
//$("tr").remove(".hqy");
} //disp
// //3.下一頁////
$("#next").click(function() {
++nowPage;
//alert(nowPage)
if (nowPage > totalPage) {
////此處減一是因為陣列下標是最大長度減一的
nowPage = totalPage;
}
//先顯示頁數後展示數
now.html(nowPage);
///要後顯示,否則頁數切換不正確
disp(nowPage, list);
});
///////4.上一頁/////
$("#first").click(function() {
--nowPage;
if (nowPage < 1) {
////此處為0,傳遞的是陣列的最小標
nowPage = 1;
}
//先顯示頁數後展示資料
now.html(nowPage);
disp(nowPage, list);
});
/////5.首頁
$("#start").click(function() {
//先顯示頁數後展示資料
nowPage = 1; //注意變數的值要設
now.html(nowPage);
disp(nowPage, list);
});
/////6.尾頁
$("#end").click(function() {
//先顯示頁數後展示資料
nowPage = totalPage; //注意變數的值要設
now.html(nowPage);
disp(nowPage, list);
});
//////7.跳轉到某一頁
$("#go").click(function() {
var j = $("#inp").val().trim();
//alert(j=='NaN');
if (j == "" || j == null || j == 'NaN') { //使用者可能沒輸入
nowPage = 1;
} else {//不是空則轉換為整型數
nowPage = parseInt(j);
}
//先顯示頁數後展示資料,注意變數的值要設
if (nowPage > totalPage) {
nowPage = totalPage;
}
$("#inp").val(nowPage);
now.html(nowPage);
disp(nowPage, list);
});
});
// 超客學堂chaoke.ke.qq.com加群657540173免費領取更多
2.JSON資料,儲存到my.json檔案中
[{"name":"小美","age":19},{"name":"李小剛","age":18},{"name":"小明","age":20},
{"name":"胡江姍","age":17},{"name":"高大山","age":23},{"name":"李楠","age":19},
{"name":"tom","age":24},{"name":"張成功","age":21},{"name":"王強","age":25},
{"name":"劉青雲","age":26},{"name":"張太雷","age":24},{"name":"mary","age":19},
{"name":"bean","age":19},{"name":"錢三一","age":25},{"name":"趙小二","age":23},
{"name":"corday","age":20},{"name":"高興","age":21},{"name":"李太高","age":19}]
三 .執行效果
