• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Angular 4 Table And Pagination Using Angular2-datatable For Beginner

Tutorial Angular 4 Table And Pagination Using Angular2-datatable For Beginner

By Sigit Prasetya Nugroho ∙ November 1, 2017 ∙ Javascript ∙ 2 Comments

Share : TwitterFacebookTelegramWhatsapp

Showing the data set in the table in angular 4 is quite easy. Several free plugins can be used to display data in tables like angular2-datatable that will discuss in this article.

angular2-datatable is a table of components that have been equipped with pagination and sorting data features. Also, this plugin has support with the bootstrap framework so that it can be applied to the mobile display.

Okay, we start the following tutorial, if you have not used bootstrap in your application, please read the How To Integrate Angular 4 + Bootstrap 3 For Beginners article. But this app is still running without using bootstrap

Tutorial Angular 4 Datatables And Pagination Min

Table of Contents

  • 1 Table And Pagination Using Angular2-datatable in Angular 4
    • 1.1 So my brief tutorial about angular 4 table and pagination for beginner may be useful

Table And Pagination Using Angular2-datatable in Angular 4

install angular2-datatable from npm

Related Articles :

  • Trick To Redirect New Window Or Tab With Post Method On Angular 5
  • Tutorial To Change Date Format Ng-bootstrap Datepicker Angular 5
  • Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

1
npm i -S angular2-datatable

Note: in this tutorial use angular-cli to simplify the development of angular applications 4

edit app.module.ts and import the following code

1
import { DataTableModule } from "angular2-datatable";

then add the following script to the imports section

1
2
3
imports: [
BrowserModule,
DataTableModule,

Open the app.component.ts file and add the following script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-daftar-user',
  templateUrl: './daftar-user.component.html',
  styleUrls: ['./daftar-user.component.css'],
})
export class DaftarUserComponent implements OnInit {
  obj: any = new Array({ name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" });
  userlist: any;
  constructor() {
  }
  ngOnInit() {
    this.userlist = this.obj;
  }
}

open the app.component.html file and add the following script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="row margintop20px paddingtopbottom15px whitebackground">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table class="table table-striped table-hover table-bordered " [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="3">
        <thead>
          <tr>
            <th style="width:40px;max-width:40px;">#</th>
            <th style="width:60px;max-width:60px;"><mfDefaultSorter by="name">Name</mfDefaultSorter></th>
            <th><mfDefaultSorter by="email">Email</mfDefaultSorter></th>
            <th><mfDefaultSorter by="age">Age</mfDefaultSorter></th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of mf.data; let i = index;">
                <td scope="row">{{i+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
            </tr>
        </tbody>
        <tfoot>
          <tr>
              <td colspan="4">
                  <mfBootstrapPaginator ></mfBootstrapPaginator>
              </td>
          </tr>
          </tfoot>
      </table>
    </div>
  </div>
</div>

Please execute the script above, if running properly the system will work like the following picture.

Angular2 Datatables Tutorial Angular 4

Above is a simple example, if you want to understand the angular2-datatable plugin can visit the official website via GitHub page

So my brief tutorial about angular 4 table and pagination for beginner may be useful

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for Gilberto GarcíaGilberto García says

    December 15, 2017 at 3:32 pm

    ¡Me funciono mucho!

    ¡Muchas gracias!

    Reply
  2. Avatar for HugoHugo says

    June 6, 2018 at 7:39 pm

    Do you have any beginner tutorial to integrate datatable to angular 4?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      June 10, 2018 at 8:27 am

      i never use datatables in angular…still newbie in angular.. use basic table and modified it, i think its more powerfull than datatable

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com