Let me first briefly introduce the basic concepts of angular.js and bootstrap.
AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag.
AngularJS extends HTML through directives and binds data to HTML through expressions.
Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
I have been learning Angular.js recently and have practiced a lot of demos during the learning process. Here I will post the form + pagination first.
Let's take a look at the final result:
I have to say that the Angular.js code style is very popular, and dozens of lines of code clearly and concisely implement the above functions.
First of all, the data source of the table comes from Server.js, click to download. Get the number and then display it on page.
1. The table is displayed through ng-repeat, and the code is as follows:
<table><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 of repeat. The column header of the table is the key value looped through the first row of the data source (json). Of course, if Bootstrap needs to specify that the Class of the table is table table-bordered.
2. Pagination also uses ng-repeat. I have to say that ng-repeat is a common instruction.
The paging code is as follows:
<nav><ul><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><li><a ng-click="Next()"><span>Next page</span></a></li></ul></nav>Here we use the ng-click event instruction. Also used ng-class command
ng-class="{active: isActivePage(page)}"The above code is the style selected for pagination.
This table adds paging to the page is a fake paging, which takes data from the backend once, and displays the filtered data of json through different paging.
Specific code + comments:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Table</title> </head><body><!-- 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><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><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><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>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 number of pages$scope.pageSize = 5;$scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //Number of pages$scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;$scope.pageList = [];$scope.selPage = 1;//Set the table data source (paging)$scope.setData = function () {$scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//Filter out the current displayed data in the table by the current number of pages}$scope.items = $scope.data.slice(0, $scope.pageSize);//The array to which the pagination is to be repeated for (var i = 0; i < $scope.newPages; i++) {$scope.pageList.push(i + 1);}//Print the currently selected page index $scope.selectPage = function (page) {//Not less than 1 than the maximum if (page < 1 || page > $scope.pages) return;//The maximum number of pages is displayed 5if (page > 2) {//Because only 5 pages are displayed, the page conversion starts larger than 2 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);};//Set the currently selected page style $scope.isActivePage = function (page) {return $scope.selPage == page;};//Previous page$scope.Previous = function () {$scope.selPage($scope.selPage - 1);}//Next page$scope.Next = function () {$scope.selPage($scope.selPage + 1);};});})</script></body></html>The editor will introduce so much to you about the combination of Angular.js and Bootstrap to implement the table paging code, and I hope it will be helpful to you!