ANGULARJS中使用JQUERY分頁(yè)控件
首篇,不知寫何物,思來(lái)想去,敬上分頁(yè)控件使用方法,望共同探討。
分頁(yè)乃前端數(shù)據(jù)展現(xiàn)之常用功能,而在我們使用的Angular js中,原生的分頁(yè)需要將數(shù)據(jù)全部取到前端后,然后再到前端分頁(yè),在大批量數(shù)據(jù)操作時(shí)并不實(shí)用。接下來(lái),我來(lái)介紹了將一種jquery的分頁(yè)控件修改為Angularjs指令的方法。
首先在web項(xiàng)目中引用jquery1.10、Angularjs庫(kù)文件以及jq-pagination控件。
我降指令名稱為custompagination,為指令添加Html樣式。

然后給指令添加對(duì)應(yīng)的控制器。

指令使用時(shí),html頁(yè)面代碼如下

對(duì)應(yīng)控制器數(shù)據(jù)獲取的方法為
控件的最終使用效果。

注意事項(xiàng):jquery控件的調(diào)用更多的是使用一種同步的方式,而Angularjs獲取后臺(tái)數(shù)據(jù)則全部采用的是異步方式,在同時(shí)使用jquery和Angularjs時(shí)需要注意將兩種不同的編程思想結(jié)合起來(lái)。在本例中最大的問(wèn)題是在使用Angularjs獲取后臺(tái)數(shù)據(jù)后如何將新的分頁(yè)情況通知給jquery分頁(yè)控件,然后刷新分頁(yè)控件的頁(yè)面數(shù)據(jù)。本例是在Angularjs和jquery代碼中各進(jìn)行一次回調(diào)來(lái)實(shí)現(xiàn)的。其實(shí)也可以在Angularjs指令中使用watch來(lái)監(jiān)視分頁(yè)控件數(shù)據(jù)的變化達(dá)到刷新頁(yè)面的目的,歡迎各位作進(jìn)一步的探索。
相關(guān)文章
angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover,tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法
這篇文章主要介紹了在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)的相關(guān)資料,需要的朋友可以參考下2016-06-06
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-09-09
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

