Skip to content

AngularJs UI -- Want to be the best UI include pagination 分页

Notifications You must be signed in to change notification settings

xuwenzhi1104/AngularJs-UI

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

AngularJs UI -- Want to be the best UI

Since name for a UI is boring, so I decide name it to tm.I'm not good at English, wish you you catch what I said And help me improve my English.

tm.pagination -- A very simple and useful pagination in AngularJs

Online demo tm.pagination

default:

with some css and template change you can turn it to this

// in the view
<tm-pagination conf="paginationConf"></tm-pagination>

// in the controller
$scope.paginationConf = {
    currentPage: 1,
    totalItems: 8000,
    itemsPerPage: 15,
    pagesLength: 15,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function(){

    }
};

conf is a object, it has attributes like below:

  • currentPage: Current page number, default 1
  • totalItems: Total number of items in all pages
  • itemsPerPage: number of items per page, default 15
  • onChange: when the pagination is change, it will excute the function
  • pagesLength: number for pagination size, default 9
  • perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50]

if you want to use with ajax,you may follow like this:

$scope.paginationConf = {
    onChange: function() {
        $http.get('xxx', function(data) {
            $scope.paginationConf.totalItems = data.totalItems;
        })
    }
};

About

AngularJs UI -- Want to be the best UI include pagination 分页

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 74.3%
  • HTML 20.7%
  • CSS 5.0%