<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg_content{ height: 500px; background-color: #ddd; } .pg_page{ float: right; } .pageBtnBox{ display: inline-block; } </style> </head> <body> <h1>分頁</h1> <div class="pg_content"> </div> <div class="pg_control"> 顯示<input type="text" value="5" id="eachPageNum">條/頁 <div class="pg_page"> <button name="first" class="controlPageBtn">首頁</button> <button name="pref" class="controlPageBtn">上一頁</button> <div class="pageBtnBox"> <!--<button>1</button> <button>2</button> <button>3</button>--> </div> <button name="next" class="controlPageBtn">下一頁</button> <button name="last" class="controlPageBtn">尾頁</button> </div> </div> <script type="application/javascript" src="js/jquery-2.1.1.js"></script> <script> $(window).ready(function(){ var res,//保存ajax請求返回json數據 toltalPage,//總共多少頁 nowPage = 1;//當前頁默認爲1 //將json請求回來插入分頁主體中 $.ajax({ url: 'data/paging_data.json', type: 'get', data: '', success: function(backdata){ res = backdata; //生成第一個頁面 getFirstPage(res,1); } }); //計算出一共有多少頁，並生成對應頁碼，將第一頁內容插入分頁當中，生成首頁 function getFirstPage(res,nowPage) { var eachPageNum = Number($("#eachPageNum").val()),//每頁顯示多少條 dataLength = res.length,//數據長度 startIndex = (nowPage-1)*eachPageNum,//當前頁數據起始腳標 nowData = res.slice(startIndex,startIndex + eachPageNum),//當前頁數據 insertData = '',//要插入內容HTML片段 insertPageButton = '';//要插入翻頁按鈕html片段 //總共多少頁，向上取整 toltalPage = Math.ceil(dataLength/eachPageNum); //生成對應個數頁碼 for(var i = 0;i < toltalPage; i ++){ insertPageButton += "<button>" + (i+1) + "</button>" } $(".pageBtnBox").html(insertPageButton); //遍歷數據，存入插入數據中 $.each(nowData,function(i,n){ insertData += n.content + '<br/>'; }); //將插入收據放入分頁主體中 $('.pg_content').html(insertData); } //顯示多少條數據輸入框失去焦點事件 $("#eachPageNum").blur(function(){ //重新生成首頁,默認第一頁 getFirstPage(res,1); }); //分頁按鈕點擊事件 $(".pageBtnBox").on('click','button',function(){ getFirstPage(res,$(this).text()) }); $('.controlPageBtn').click(function(){ var controlWay = $(this).attr('name'); if(controlWay == "first"){//點擊首頁按鈕 getFirstPage(res,1); }else if(controlWay == "last"){//點擊尾頁按鈕 getFirstPage(res,toltalPage); }else if(controlWay == "pref"){//點擊上一頁按鈕 nowPage = nowPage - 1 < 1?1:nowPage - 1;//如果當前頁小於1，則取最小值1 getFirstPage(res,nowPage); }else if(controlWay == "next"){//點擊下一頁按鈕 nowPage = nowPage + 1 > toltalPage?toltalPage:nowPage + 1;//如果當前頁大於toltalPage，則取最大值toltalPage getFirstPage(res,nowPage); } }); }); </script> </body> </html>
分頁
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.