1. 程式人生 > >一個簡單易懂且實用的JQuery分頁外掛(jquery.page)(詳解)

一個簡單易懂且實用的JQuery分頁外掛(jquery.page)(詳解)

在你的.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(){
	                //請求出錯處理
	            }         
	         });

        }
		

嘿哈,這就完成啦,最後附上一張效果圖。