AngularJS and Bootstrap implement table paging instance code, angularjsbootstrap

AngularJS and Bootstrap implement table paging instance code, angularjsbootstrap

AngularJS has been used for more and more developers since its launch. It also shows that most front-end users are switching to this site. After all, it is a product produced by Google, so I have recently learned this part of knowledge.

AngularJS Bootstrap implements table paging:

I have been learning Angular. js recently and have also practiced many demos during the learning process. Here I will first paste a table + Page.

First, let's look at the final result:

 

I have to say that Angular. js Code style is very popular, and dozens of lines of code are clear and concise to implement the above functions.

First, the data source of the table comes from Server. js. Click to download it. After obtaining the number through get, the page is displayed.

1. The table is displayed through ng-repeat. The Code is as follows:

<table class="table table-bordered">  <tr>    <th>index</th>    <th ng-repeat="(x,y) in items[0]">{{ x }}</th>  </tr>  <tr ng-repeat="x in items">    <td>{{ $index + 1 }}</td>    <td ng-bind="x.Name"></td>    <td ng-bind="x.City"></td>    <td ng-bind="x.Country"></td>  </tr></table>

$ Index is the default repeat parameter. The column header of the table is the key value cyclically obtained through the first row of the data source (json. Of course, if Bootstrap wants to specify that the Class of the table is table-bordered.

2. ng-repeat is also used for paging, and ng-repeat is a common instruction. The paging code is as follows:

<Nav> <ul class = "pagination"> <li> <a ng-click = "Previous () "> <span> previous page </span> </a> </li> <li ng-repeat =" page in pageList "ng-class =" {active: isActivePage (page)} "> <a ng-click =" selectPage (page) ">{{ page }}</a> </li> <a ng-click =" Next () "> <span> next page </span> </a> </li> </ul> </nav>

Here the ng-click Event command is used. The ng-class command is also used.

Ng-class = "{active: isActivePage (page )}"

The above code is used to select the style by page.

This table is paginated, and data is retrieved from the backend. json data is filtered by different pages.

Code + notes:

<! -- New Bootstrap core CSS file --> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> # divMain {width: 500px; margin: 0 auto; margin-top: 100px;} nav {position: relative; width: 100%; height: 50px ;}. pagination {right: 0px; position: absolute; top:-30px;} nav li {cursor: pointer ;} </style> <div id = "divMain" ng-app = "myApp" ng-controller = "myCtrl"> <t Able class = "table-bordered"> <tr> <th> index </th> <th ng-repeat = "(x, y) in items [0] ">{{ x }}</th> </tr> <tr ng-repeat =" x in items "> <td >{{ $ index + 1 }}</td> <td ng-bind = "x. name "> </td> <td ng-bind =" x. city "> </td> <td ng-bind =" x. country "> </td> </tr> </table> <nav> <ul class =" pagination "> <li> <a ng-click =" Previous () "> <span> previous page </span> </a> </li> <li ng-repeat =" page in pageList "ng-class =" {active: IsActivePage (page)} "> <a ng-click =" selectPage (page) ">{{ page }}</a> </li> <a ng-click =" Next () "> <span> next page </span> </a> </li> </ul> </nav> </div> <script src =" http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js "> </ script> <script type = "text/javascript"> var app = angular. module ("myApp", []); app. controller ("myCtrl", function ($ scope, $ http) {$ http. get ("Service. js "). then (function (re Else SE) {// data source $ scope. data = response. data. records; // the total number of pages $ scope. pageSize = 5; $ scope. pages = Math. ceil ($ scope. data. length/$ scope. pageSize); // Number of pages divided $ scope. newPages = $ scope. pages> 5? 5: $ scope. pages; $ scope. pageList = []; $ scope. selPage = 1; // set the table data source (pagination) $ scope. setData = function () {$ scope. items = $ scope. data. slice ($ scope. pageSize * ($ scope. selPage-1), ($ scope. selPage * $ scope. pageSize); // filter the data currently displayed in the table by the current page number} $ scope. items = $ scope. data. slice (0, $ scope. pageSize); // The array for repeat (var I = 0; I <$ scope. newPages; I ++) {$ scope. pageList. push (I + 1);} // print the current selected page index $ scope. SelectPage = function (page) {// The value cannot be greater than 1. if (page <1 | page> $ scope. pages) return; // display a maximum of five pages. if (page> 2) {// because only five pages are displayed, pagination conversion starts when there are more than two pages. var newpageList = []; for (var I = (page-3); I <(page + 2)> $ scope. pages? $ Scope. pages: (page + 2); I ++) {newpageList. push (I + 1);} $ scope. pageList = newpageList;} $ scope. selPage = page; $ scope. setData (); $ scope. isActivePage (page); console. log ("selected page:" + page) ;}; // sets the currently selected page style $ scope. isActivePage = function (page) {return $ scope. selPage = page ;}; // Previous page $ scope. previous = function () {$ scope. selectPage ($ scope. selPage-1);} // next page $ scope. next = function () {$ scope. selectPage ($ scope. selPage + 1) ;};};}) </script>

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!