Angularjs+Bootstrap實現分頁指令

標籤：scope   conf   evo   部分   點擊   app   添加   日常   ges   

　　本外掛程式的開發目的主要給前端同學使用，本人是專註於後台開發的，對css樣式不熟悉，但逼於前端要求做一個共公組件方便日常開發，所以這個外掛程式在樣式上可能不適合大部分人，喜歡的拿走吧，不喜歡的也請別噴。

 一、使用環境

　　1.Angularjs  1.x

　　2.Bootstrap 3

  　在自己的環境裡請自行配置js和css，本文不作這方面的介紹。

二、

　　

　　效果邏輯：

　　　　1.當前頁碼預設選中高亮狀態

　　　　2.頁碼少於等於1，則“上一頁”為不可點擊狀態

　　　　3.頁碼大於等於最大頁碼，則“下一頁”為不可點擊狀態

　　　　4.頁碼輸入框的範圍是 1~最大頁碼，當超過最大頁碼時，“確定”按鈕不可點

　　　　5.如果總記錄數不存在或少於1，則整個外掛程式不顯示任何效果 

三、使用步驟

　　1.下載檔案：etgyd.pagination.min.js   添加到頁面裡

<script type="text/javascript" src="etgyd.pagination.min.js"></script>

　　2.Angularjs 添加引用

angular.module(‘Webapp‘, [‘etgyd.pagination‘]);

　　3.html裡使用本指令

<div>    <etgyd-pagination page-model="pagevo" page-control="pageConfig" call-function="queryPage(pagevo.pageNum)" ></etgyd-pagination></div>

　　參數說明：　

參數	說明	例子
page-model	{ pageNum: 1,//當前頁碼 pageSize: 10,//每頁大小 total: 200,//總記錄數 pages: 20,//總頁數,允許為空白 pagesLength: 5//顯示分頁按鈕數，必須為奇數，預設為5，允許為空白 }
page-control	開放的api，目前只有extent()	$scope.pageConfig.extent()
call-function	回調方法，可以自訂查詢，此處會返回點擊的頁碼	$scope.queryPage=function(num){ $scope.query("",num); }

 

　　4.controller的實現

　　 這裡需要定義兩個方法 1、上面所提到的回調方法$scope.queryPage  2、與伺服器互動的查詢方法 $scope.query

　　$scope.queryPage接收的參數為指令返回的，固定為pageNum

　　$scope.query 實現如下，大家可以自行修改，以下只是我的實現，其中有兩個地方需要注意，分頁對象必須要聲明，聲明後要延時執行指令，時間最好大於200ms，我這裡寫的是1秒後執行

 

整個指令的使用就是以上這些，很久沒有寫部落格了，這次也算是在學習了一天后的少少分享，可能有些地方寫得不太好，歡迎留言！

 

Angularjs+Bootstrap實現分頁指令