angularjs中分頁的應用

2021-09-25 17:38:32 字數 2940 閱讀 6359

應angular的spa專案需要,現後台管理系統中需要用到分頁,於是就找到了這個基於bootstrap的分頁,封裝性很好,用起來也非常方便,這裡是模擬的資料庫資料,實際中只需要將模擬資料換成介面呼叫返回的資料即可,並且可以實現按頁、按數量的按需載入,也可以全部載入,記得引入ui.bootstrap就可以了

效果如圖:

下面是完整可直接執行的**:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>分頁

title

>

<

link

rel="stylesheet"

href

="">

<

script

src=""

>

script

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

<

style

>

style

>

<

script

>

angular.module(''

,['ui.bootstrap

']).controller(

"paginationctrl",

function

($scope,$log),,,

,,,,

,,,,

,,,,

]; $scope.sec

=[,,];

$scope.totalitems

=vm.commenlist.length;

$scope.currentpage=3

;//當前頁面數,設定預設進入的當前頁面

$scope.pagesize=5

;//改變量值,每個頁面拉的資料數目就會改變

$scope.pagenum

=math.ceil($scope.totalitems

/$scope.pagesize);

//當前頁面數

$scope.allitem=;

for(

vari=0

;i<

$scope.totalitems;i

+=$scope.pagesize)

vargetlist

=function

() $scope.pagechanged

=function

() })

script

>

head

>

<

body

>

<

div

ng-controller

="paginationctrl"

>

<

div

class

="table"

>

<

table

class

="table table-striped"

>

<

thead

>

<

tr>

<

th>序號

th>

<

th>title

th>

<

th>內容

th>

tr>

thead

>

<

tbody

>

<

tr ng-repeat

="item in allitem[currentpage-1]"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

tr>

tbody

>

table

>

div>

<

div

class

="page"

>

<

ul uib-pagination

boundary-links

="true"

class

="pagination-lg"

total-items

="totalitems"

ng-model

="currentpage"

items-per-page

="pagesize"

previous-text

="‹"

next-text

="›"

first-text

="«"

last-text

="»"

max-size

='3'

boundary-link-numbers

="true"

ng-change

='pagechanged()'

>

ul>

div>

div>

body

>

html

>

oracle中分頁的知識

一 前言 自從出來實習後,基本上都沒有按下心來總結下自己學的知識點,剛剛好現在快要國慶了,沒有到深圳出差,在公司呆了三天,可以說是在公司打了三天的醬油啊,所以前兩天都是在看些正則的文件,並且寫了下總結 等到要寫的時候才覺得好像也沒什麼要寫的啊 所以還是一點一點的寫吧,因為五月份的實習知識點自己也做了...

oracle中分頁查詢

上限條件必須放在子查詢,而下限條件必須放在外層查詢 rownum總是從1開始的,第一條不滿足去掉的話,第二條的rownum 又成了1 select from select rownum rowno,t.from tab t where rownum page size tab alias where...

mybatis中分頁查詢

1 如果在查詢方法中有多個引數,可以使用map物件將所有資料都儲存進去。比如分頁查詢,需要用到兩個引數,可以將這兩個引數包裝到map中。例子 分頁查詢 dao層方法 public listgetstudentpage int pstart,int pnumber throws exception c...