這個ajax分頁是基本jquery來實現的,足以滿足正常需求。。。
效果:
HTML:
CSS:
.zh-page{height: 20px;padding: 20px 0;text-align: right;} .zh-page ul{display: inline-block;height: 20px;} .zh-page ul li{float: left;height: 20px;line-height: 20px;margin: 0 3px;color: #fff;font-size: 14px;} .zh-page ul li a{display: block;height: 100%;min-width: 10px;border-radius: 10px;padding: 0 5px;color: #fff;} .zh-page ul .zh-cur a{background-color: #4DDDF2;color: #1c1c1c;} .zh-page .zh-icon-prev, .zh-page .zh-icon-next{display: inline-block;width: 0;height: 0;border-style: solid;border-width: 4px 6px;border-color: transparent #858587 transparent transparent;} .zh-page .zh-icon-next{border-color: transparent transparent transparent #858587;}
JS:
$.extend({ // ajax分頁 page: function(options) { var defaults = { "visiblePages": 6 // 可見頁碼(不能小于4) }; var opts = $.extend({}, defaults, options); var curPage = opts.curPage; // 創建分頁列表 function createPageList(curPage) { var li = "
調用:
$.page({ ele: ".zh-page ul", curPage: 1, // 當前頁 visiblePages: 5, // 可見頁碼 change: function(num) { // 回調 // alert(num); }, totalPages: 20 // 總頁數 });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/83482.html
摘要:是一個組件庫目前擁有的組件語法編寫,無依賴原生模塊化,以上支持,請開啟靜態服務器預覽效果,靜態服務器傳送門采用變量配置樣式辛苦造輪子,歡迎來倉庫四月份找工作,求內推,坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件,然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件:DatePicker, TimePicker, Paginator, Tree, Cascader, ...
摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。 第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。 言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。 第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。 言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要:本教程內容已過時,更新版教程請訪問博客開發入門教程。當分頁較多時,總是顯示當前頁及其前幾頁和后幾頁的頁碼教程中使用的是兩頁,其他頁碼用省略號代替。 本教程內容已過時,更新版教程請訪問: django 博客開發入門教程。 摘要:前兩期教程我們實現了博客的 Model 部分,以及 Blog 的首頁視圖 IndexView,詳情頁面 DetailView,以及分類頁面 CategoryVi...
閱讀 1672·2021-11-16 11:41
閱讀 2466·2021-11-08 13:14
閱讀 3117·2019-08-29 17:16
閱讀 3086·2019-08-29 16:30
閱讀 1850·2019-08-29 13:51
閱讀 363·2019-08-23 18:38
閱讀 3232·2019-08-23 17:14
閱讀 638·2019-08-23 15:09