Angularjs and bootstrap implement table pagination instance code _ANGULARJS

Angularjs from the beginning of the release to the current use of the development of more and more, also shows that most of the front end of the friend to turn this way, after all, is the product of Google products Ah, so recently I also learn this part of knowledge.

Angularjs Bootstrap Implementation form pagination:

Recently has been learning angular.js, in the learning process also practiced a lot of demo, here first paste the table + pagination.

Let's take a look at the final result:

Have to say Angular.js code style is very popular, dozens of lines of code clear and concise implementation of the above functions.

First, the data source of the table is from, server.js click to download. The page is displayed after a get number is fetched.

1. The form 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 parameter for repeat. The column header of a table is a key value that is recycled through the first row of the data source (JSON). Of course, if bootstrap to specify the class of the table is table table-bordered.

2. Pagination is also used ng-repeat, have to say ng-repeat is a common instruction. The paging code is as follows:

<nav>
  <ul class= "pagination" >
    <li>
      <a ng-click= "Previous ()" >
        <span > prev </span>
      </a>
    </li>
    <li ng-repeat= "page in PageList" ng-class= "{active: Isactivepage (page)} ">
      <a ng-click=" selectpage (page) >{{page}}</a>
    </li>
    < li>
      <a ng-click= "next ()" >
        <span> next </span>
      </a>
    </li>
  </ul>
</nav>

Ng-click event instructions are used here. Also use the Ng-class command.

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

The above code is for pagination-selected styles.

This table plus pagination is a false paging, fetching data from the back end to display JSON filtered data through different pagination.

Specific code + Comments:

<!--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" > <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&
  Gt </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}}&
        lt;/a> </li> <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 (response) {//Data source
      $scope. data = Response.data.records;
      Total paging $scope. pageSize = 5; $scope. Pages = Math.ceil ($scope. data.length/$scope. pageSize); Page $scope. newpages = $scope. pages > 5?
      5: $scope. pages;
      $scope. pagelist = [];$scope. selpage = 1; Set table data Source (paging) $scope. SetData = function () {$scope. Items = $scope. Data.slice ($scope. PageSize * ($scope. Sel Page-1)), ($scope. Selpage * $scope. PageSize))//filter out the current display data for the table by the current number of pages} $scope. Items = $scope. Data.slice (0, $sco
      Pe.pagesize);
      The repeat array for (var i = 0; i < $scope. Newpages i++) {$scope. Pagelist.push (i + 1); //Print the currently selected page index $scope. selectpage = function (page) {//cannot be less than 1 greater than maximum if (Page < 1 | | page > $
        Scope.pages) return;
          Up to 5 if (Page > 2) {//Because only 5 pages are displayed, more than 2 pages begin paging conversion var newpagelist = []; for (var i = (page-3); i < (page + 2) > $scope. Pages $scope. Pages: (page + 2); i++) {Newpageli
          St.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, I hope to help you, thank you for your support for this site!