Angular. js and Bootstrap are combined to implement table paging code _ AngularJS

Source: Internet
Author: User
I have been learning about angularjs recently. I wrote a small demo during the learning process. I will share my code ideas with you. I will give you a brief introduction to angular if you are interested. basic concepts of 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:

index {{ x }}
{{ $index + 1 }}

$ 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:

  • Previous Page
  • {Page }}
  • Next Page

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:


Index {X }}
{$ Index + 1 }}
  • Previous Page
  • {Page }}
  • Next Page

Related Article

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: 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.