Angular. js and Bootstrap are combined to implement table paging code, while angularjs implements Paging

Angular. js and Bootstrap are combined to implement table paging code, while angularjs implements Paging

First, we will briefly introduce the basic concepts of angular. js and bootstrap.

AngularJS is a JavaScript framework. It can be added to the HTML page through the <script> tag.

AngularJS extends HTML through commands and binds data to HTML through expressions.

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

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:

<! DOCTYPE html> 
We will introduce so much about how Angular. js and Bootstrap work together to implement table paging code. I hope it will help you!
Articles you may be interested in:

 

 
  
Bootstrap table server-side paging example sharing
 
  
Pagination plug-in based on bootstrap3 and jquery
 
  
Use JQUERY paging control in ANGULARJS
 
  
Perfect for bootstrap paging queries
 
  
Angularjs table Paging
 
  
Bootstrap entry books (5) navigation bar and paging navigation