Learn Angularjs paging commands and angularjs paging commands

Learn Angularjs paging commands and angularjs paging commands

Many pages in the project use paging, and each page has a lot of repeated paging code. Therefore, I wrote a simple paging command to simplify the Page code and maintain it easily, use it as a backup in your blog for future reference.
Follow these steps to define commands and their applications:

1. Command Definition
Defines a js file, page-directive.js, used to write paging command code, this file contains the paging template, the following is all the code in the js file:

'Use strict '; (function () {angular. module ('template/pageInit/pageInit.html ', []). run (['$ templateCache', function ($ templateCache) {$ templateCache. put ('template/pageInit/pageInit.html ', '<ul class = "pagination-main"> \ n' +' <li class = "prev-page" ng-class = "{disabled: pageData. currentPage = 1} "title =" Homepage "> \ n' + '<a href =" javascript: void (0); "ng-click =" on_loadPage (1) "> <span class =" fa-fast-backward "> </s Pan> </a> \ n' + '</li> \ n' +' <li class = "prev-page" ng-class = "{disabled: pageData. currentPage = 1} "> \ n' + '<a href =" javascript: void (0); "ng-click =" on_prev () "title =" Previous Page "> <span class =" fa-step-backward "> </span> </a> \ n' + '</li> \ N' + '<li class = "data-page" ng-repeat = "page in pageData. pages "ng-class =" {\ 'first-page \ ': page = 1, \ 'last-page \': page = pageData. totalPage} "> \ n' + '<a ng-if =" page! = \'... \ '"Href =" javascript: void (0); "ng-class =" {\ 'bg-custom \': page = pageData. currentPage} "ng-click =" on_loadPage (page, tabData) ">{{ page }}</a> \ n' + '<a ng-if =" page = \'... \ '"href =" javascript: void (0); "ng-class =" {\ 'bg-custom \': page = pageData. currentPage} "ng-click =" ">{{ page }}</a> \ n' + '</li> \ n' +' <li class =" next- page "ng-class =" {disabled: pageData. currentPage = pageData. totalPage} "> \ n' + '<a href =" javascript: void (0); "ng-click =" on_next () "title =" next page "> <span class =" fa-step-forward "> </span> </a> \ n' + '</li> \ N' + '<li class = "skip-page"> <div> <input type = "text" placeholder = "" ng-model = "inpage"> \ n' +' <input type = "button" value = "jump" ng-click = "on_loadPage (inpage) "> </div> \ n' + '</li> \ n' +' <li class =" data-num "> <a class =" cursor-text "href = "#"> <span> {pageData. count }}</span> </a> </li> \ n' + '</ul> \ n' + '');}]); angular. module ('pageinit', ['template/pageInit/pageInit.html ']). directive ('pageinit ', ['pageinittemplate', function (pageinitTemplate) {return {restrict:' AE ', templateUrl: function (tElement, tAttrs) {return tAttrs. templateUrl | pageinitTemplate. getPath () ;}, replace: true, scope: {pageData: '=', prev: '&', next: '&', loadPage: '&'}, link: function (scope, element, attrs) {scope. on_prev = function () {if (scope. prev) {scope. prev () ;}}; scope. on_next = function () {if (scope. next) {scope. next () ;}}; scope. on_loadPage = function (page) {scope. inpage = undefined; if (scope. loadPage) {scope. loadPage ({page: page}) ;}}}};}]). provider ('pagitittemplate', function () {var templatePath = 'template/pageInit/pageInit.html '; this. setPath = function (path) {templatePath = path;}; this. $ get = function () {return {getPath: function () {return templatePath ;}};};});}). call (window );

2. Paging style Control
The suggestion is written in a single. CSS file. The pagesync.css file is first created. The following is a specific style.

.pagination-main { display: inline-block; padding-left: 0; margin: 0 0; border-radius: 4px; vertical-align: middle;}.pagination-main li.prev-page > a { border: 0;}.pagination-main li.next-page > a { border: 0; border-left: 1px; margin-left: 0;}.pagination-main li.first-page > a { border-top-left-radius: 0; border-bottom-left-radius: 0;}.pagination-main li.last-page > a { border-top-right-radius: 0; border-bottom-right-radius: 0;}.pagination-main li div { width: 80px;border: 1px solid #DDDDDD;background-color: #ffffff;float: left;padding: 0;}.pagination-main li.skip-page input[type='text'] { width: 24px;height: 20px;border: 0;text-align: center;}.pagination-main li.skip-page input[type='button'] { padding: 0 4px 1px 10px;border: 0;border-left: 1px solid #dddddd;background-color: #ffffff}.pagination-main li.data-num > a { border: 0; margin-left: 0;}.pagination-main > li { display: inline;}.pagination-main > li:first-child > a,.pagination-main > li:first-child > span { /*margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;*/}.pagination-main > .active > a,.pagination-main > .active > span,.pagination-main > .active > a:hover,.pagination-main > .active > span:hover,.pagination-main > .active > a:focus,.pagination-main > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca;}.pagination-main > li > a,.pagination-main > li > span { position: relative; float: left; /*padding: 6px 12px;*/ padding: 1px 8px; margin-left: -1px; line-height: 1.42857143; color: #428bca; text-decoration: none; background-color: #fff; border: 1px solid #ddd;}.pagination-main > .disabled > span,.pagination-main > .disabled > span:hover,.pagination-main > .disabled > span:focus,.pagination-main > .disabled > a,.pagination-main > .disabled > a:hover,.pagination-main > .disabled > a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd;}

3. Paging Query Method
In the factory, I customized the paging query method to share and facilitate code maintenance. In angular, the interaction with the background is asynchronous by default. I wrote synchronous query here. First, define the js file pageSync. service. js. The following is all the content of the factory:

'Use strict '; angular. module ('app '). factory ('pagesync ', [' $ http', '$ Q', function Page ($ http, $ q) {var rowCollectionPage = []; var totalPage = 1; var pages = []; var endPage = 1; var load = function (url, currentPage, pageSize, deferred) {var json = {rowCollectionPage: [], totalPage: 1, currentPage: currentPage? CurrentPage: 1, pages: []}; $ http. get (url ). success (function (rows) {rowCollectionPage = setPageRow (rows. list, pageSize); // get the total number of pages totalPage = Math. ceil (rows. count/pageSize); endPage = totalPage; // generate a digital link if (totalPage <= 7) {pages = getPagesLow (totalPage);} else {pages = getPagesHigh (currentPage, totalPage);} json. rowCollectionPage = rowCollectionPage; json. totalPage = 0? 1: totalPage; json. currentPage = currentPage; json. pages = pages; json. count = rows. count; json. pageSize = pageSize;/*** Custom field, which is called before during initialization. If this paging method is used, the field value is changed to after * before, which indicates that this paging method has not been used, after indicates that the paging method is passed. * Rule for loading the front-end page: If it is before, the table has no data, after and pataData. if count = 0, no data exists. Otherwise, it is regarded as data. * It can also be said to be a recorded time state (before and after data access) */json. loadTime = 'after'; deferred. resolve (json) ;}); return deferred. promise ;}; // All pages are displayed when the total number of pages is less than or equal to 7 Var getPagesLow = function (totalPage) {var temp = []; for (var I = 1; I <totalPage + 1; I ++) {temp. push (I) ;}return temp ;}; // when the total number of pages is greater than 7, obtain 7 page numbers based on the current page var getPagesHigh = function (currentPage, totalPage) {var temp = []; if (currentPage <4) {temp = [1, 2, 3, 4, 5 ,'... ', totalPage];} else if (totalPage-currentPage) <= 3) {temp = [totalPage-6, totalPage-5, totalPage-4, totalPage-3, tot AlPage-2, totalPage-1, totalPage];} else {temp = [currentPage-2, currentPage-1, currentPage, currentPage + 1, currentPage + 2 ,'... ', totalPage] ;}return temp ;}; // The height of the table in the project is calculated based on the height of the browser window, yes dynamic // because the page is fixed at the bottom of the table, empty rows are used to replace var setPageRow = function (rowArr, pageSize) {var temp = []; if (rowArr! = Undefined) {for (var I = 0; I <rowArr. length; I ++) {temp. push (rowArr [I]);} for (var j = 0; j <pageSize-rowArr. length; j ++) {temp. push ({}) ;}} else {for (var k = 0; k <pageSize; k ++) {temp. push ({}) ;}} return temp ;}; return {load: function (url, currentPage, pageSize) {var deferred = $ q. defer (); url + = '&' + currentPage + '&' + pageSize; return load (url, currentPage, pageSize, defer Red) ;}, next: function (url, currentPage, pageSize) {var deferred = $ q. defer (); if (currentPage <endPage) {currentPage ++;} url + = '&' + currentPage + '&' + pageSize; return load (url, currentPage, pageSize, deferred);}, prev: function (url, currentPage, pageSize) {var deferred = $ q. defer (); currentPage --; url + = '&' + currentPage + '&' + pageSize; return load (url, currentPage, pageSize, deferr Ed) ;}, loadPage: function (url, currentPage, pageSize, page) {var deferred = $ q. defer (); if (currentPage! = Page) {currentPage = page; url + = '&' + currentPage + '&' + pageSize; return load (url, currentPage, pageSize, deferred) ;}}}]);

4. Instructions

1) code on the page:

In my code, pages are written in tfoot in table. prev (), next (), and loadPage (page) are all defined in the controller corresponding to the page.

<Table> <thead> <tr> <th> NO. </th> <th> column name 1 </th> <th> column name 2 </th> <th style =" width: 150px; text-align: center; "> operation </th> </tr> </thead> <tbody> <tr ng-if = "! NoTableData "ng-repeat =" row in pageData. rowCollectionPage "> <td> {{!! Row. id? $ Index + 1 + (pageData. currentPage-1) * pageSize: ''}}</td> <td >{{ row. args1 }}</td> <td >{{ row. args2 }}</td> <td style = "text-align: center; "> <a href = '#'> modify </a> </td> </tr> <tr ng-if =" noTableData "ng-repeat =" data in pageData. rowCollectionPage "> <td ng-if =" $ index = 0 "colspan =" 4 "style =" text-align: center; "> no data! </Td> <td ng-if = "$ index! = 0 "colspan =" 4 "> </td> </tr> </tbody> <tfoot> <tr> <td style =" text-align: center; "colspan =" 6 "> <div> <page-init page-data =" pageData "prev =" prev () "next =" next () "load-page =" loadPage (page) "> </page-init> </div> </td> </tr> </tfoot> </table>

2). Code in controller

First, you must reference the factory and reference PageSync in the controller, as follows:

Angular. module ('app'). controller ('myctrl ', function (PageSync ){});

Make some preparations before querying by page:

// Set the paging data set, total number of pages, page number set, and total number of data in pageData. loadTime is a custom parameter used to record the time status (before and after data access)
$ Scope. pageData = {rowCollectionPage: [], totalPage: 1, currentPage: 1, pages: [], count: 0, loadTime: 'before '};
// Calculate the table height based on the actual situation.
$ Scope. tabHeight = $ scope. height-48-37-10-42-5;
// Calculate the actual number of rows of data on a page
$ Scope. pageSize = parseInt ($ scope. tabHeight-15-34-34-39)/34 );

Then write the following method in the controller:

// Query $ scope by page. load = function (row) {$ scope. surgeonPageData. rowCollectionPage = Common. setPageRow ([], $ scope. pageSize); $ scope. noSurgeonData = false; $ scope. surgeonPageData. loadTime = 'before'; PageSync. load (url, $ scope. pageData. currentPage, $ scope. pageSize ). then (function (data) {$ scope. pageData = data; if ($ scope. pageData. loadTime = 'after' & $ scope. pageData. count = 0) | $ scope. pageData. loadTime = 'B Efore') {$ scope. noTableData = true ;}}) ;}; // next page $ scope. next = function () {if ($ scope. pageData. currentPage <$ scope. pageData. totalPage) {PageSync. next (url, $ scope. pageData. currentPage, $ scope. pageSize ). then (function (data) {$ scope. pageData = data ;}) ;}; // Previous Page $ scope. prev = function () {if ($ scope. pageData. currentPage> 1) {PageSync. prev (url, $ scope. pageData. currentPage, $ scope. pageSize ). then (Function (data) {$ scope. pageData = data ;}) ;}; // click the page number to jump to $ scope. loadPage = function (page) {$ scope. inpage = undefined; var intPage; if (typeof page = 'string') {if (page! = "") {IntPage = parseInt (page, 10) ;}else {intPage = 0 ;}} else {intPage = page ;}if ($ scope. pageData. totalPage <= 1) {} else if (intPage = undefined | intPage = null) {alert ('enter the jump page number! ');} Else if (intPage <= 0 | intPage> $ scope. pageData. totalPage) {alert ('jump page number should be greater than 0, less than the total page' + $ scope. pageData. totalPage);} else if ($ scope. pageData. currentPage! = Page) {PageSync. loadPage (url, $ scope. pageData. currentPage, $ scope. pageSize, page ). then (function (data) {$ scope. pageData = data ;});}};

5. Results
The final implementation effect is as follows:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.