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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.