一個簡單易懂且實用的JQuery分頁外掛(jquery.page)(詳解)
阿新 • • 發佈:2019-02-04
在你的.html檔案中引入相關的檔案:
注意:jquery.min.js需在你引入jquery.page.js之前引入。
<link rel="stylesheet" type="text/css" href="src/jquery.page.css">
<script src="src/jquery.min.js"></script>
<script src="src/jquery.page.js"></script>
檔案引入之後,既可以使用了,在body中寫入,相關html的程式碼:
<div> <span id="page"></span> <span> 顯示 <input type="text" onkeyup="enterEvent($event)"/> 條/頁</span> </div>
接下來就開始寫我們的js程式碼啦!JS相關程式碼:
var totalPages;//總頁數 function enterEvent(e) { var keycode = window.event ? e.keyCode : e.which; if (keycode == 13) { temp(1,false); } } function tempPage(totalPages){ $("#page").Page({ totalPages:totalPages,//分頁總數 liNums: totalPages < 7 ? totalPages : 7,//分頁的數字按鈕數(建議取奇數) activeClass: 'activP', //active 類樣式定義 callBack: function (page) { temp(page,true); } }); } function getVar(result) { totalPages = result; tempPage(totalPages); temp(page, true) } function temp(index,judge){ $.ajax({ type:"POST", //提交的網址 url:url, //提交的資料 data:{ "pageSize":count, "pageIndex":index }, //返回資料的格式 datatype: "html",//"xml", "html", "script", "json", "jsonp", "text". //成功返回之後呼叫的函式 success:function(d){ if (d != null && d.Data != null) { if (judge == true) { console.log(d); } else { getVar(d.Data.PageCount); } } }, //調用出錯執行的函式 error: function(){ //請求出錯處理 } }); }
嘿哈,這就完成啦,最後附上一張效果圖。