Post
Ask Question

What is Bootstrap Table | Learn Bootstrap

In this article, I will guide you about BootstrapTable.

While developing a web application we use HTML tables to bind data(show data), in which we also want to do data sorting, data search, data export, responsive table, etc. What if we get everything under one? So, let's discuss Bootstrap table. 

What is Bootstrap Table

An extended table of the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation). 

How to use Bootstrap Table.

I have created one simple HTML page and javascript file using VS Code.

Step 1

Open HTML page

 Add CSS on Head section 

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

  Add Scripts 

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="employee.js" type="text/javascript"></script>

 Now, Lets breakdown what we have taken,

 In CSS

  1. bootstrap.min.css 
  2. bootstrap-table.min.css    - Boostrap Table CSS

In Scripts

  1. jquery.min.js
  2. bootstrap.bundle.min.js
  3. tableExport.min.js    - Its export HTML tables to xlsx, xls, cvs, and txt file.
  4. jspdf.min.js  - It generate pdf at client side
  5. jspdf.plugin.autotable.js - Download data in PDF file
  6. bootstrap-table.min.js - Bootstrap table JS file
  7. bootstrap-table-export.min.js  - Bootstrap table extension for export.

Step 2

Now, create table tag inside body

<table id="tblEmployee" class="table table-striped"></table>

Note: I have added bootstrap table classes in table. 

  1. .table - Basic table 
  2. table-striped - to add zebra-striping to any table row within the <tbody>.

Now lets see our complete HTML Code

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Bootstrap Table</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
    <section class="content">
        <div class="container-md">
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Employee List</h3>
                </div>
                <div class="table-responsive">
                    <table id="tblEmployee" class="table table-striped"></table>
                </div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="employee.js" type="text/javascript"></script>
</html>

Step 3

Add our employee.js file reference in HTML. 

Now, open employee.js file

Create a sample JSON data

var jsonData = [
    {
        employeeName: 'Vishal Yelve',
        designation: 'Architect',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    }, {
        employeeName: 'Kunal Samant',
        designation: 'Senior Manager',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Nitish Pardiwala',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Julia Semigodova',
        designation: 'Finance Manager',
        phoneNumber: '9000000000',
        departmentName: 'Finance',
        country: 'USA'
    },
    {
        employeeName: 'Jessica Densmore',
        designation: 'Human Resource Lead',
        phoneNumber: '9000000000',
        departmentName: 'HR',
        country: 'UK'
    },
    {
        employeeName: 'Nikolay Hais',
        designation: 'Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Teymur Asadov',
        designation: 'Technical Lead',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Edgars Eizvertins',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
];

Note: We can get JSON data from API, our Model 

Step 4

Now let's create our table function and bind data

$('#tblEmployee').bootstrapTable({
    data: jsonData,
    height: 500,
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 20, 50, 100],
    search: true,
    showExport: true,
    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
    columns: [
        {
            field: 'employeeName',
            title: 'Name',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'designation',
            title: 'Designation',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'phoneNumber',
            title: 'Phone Number',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'departmentName',
            title: 'Department',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'country',
            title: 'Country',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        }
    ]
});
  • #tblEmployee - Id of our HTML table
  • data - To load data
  • height - The height of the table, enables a fixed header of the table.
  • pagination - To show a pagination toolbar on the table bottom
  • pageSize - Setting the pagination property, initialize the page size
  • pageList - initialize the page size by selecting the list
  • Search - Enable the search input
  • cache - To enable/disable caching of AJAX requests
  • showExport - To enable/disable export
  • exportTypes - Export types, support types: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf']. Note:  Default ['json', 'xml', 'csv', 'txt', 'sql', 'excel'] 
  • Columns - To config columns  

for more options please refer BoostrapTable Documents 

Now let's see our complete Javascript Code

var jsonData = [
    {
        employeeName: 'Vishal Yelve',
        designation: 'Architect',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    }, {
        employeeName: 'Kunal Samant',
        designation: 'Senior Manager',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Nitish Pardiwala',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Julia Semigodova',
        designation: 'Finance Manager',
        phoneNumber: '9000000000',
        departmentName: 'Finance',
        country: 'USA'
    },
    {
        employeeName: 'Jessica Densmore',
        designation: 'Human Resource Lead',
        phoneNumber: '9000000000',
        departmentName: 'HR',
        country: 'UK'
    },
    {
        employeeName: 'Nikolay Hais',
        designation: 'Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Teymur Asadov',
        designation: 'Technical Lead',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Edgars Eizvertins',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
];


// $('#tblEmployee').bootstrapTable('destroy');
$('#tblEmployee').bootstrapTable({
    data: jsonData,
    height: 500,
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 20, 50, 100],
    search: true,
    cache: false,
    showExport: true,
    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
    columns: [
        {
            field: 'employeeName',
            title: 'Name',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'designation',
            title: 'Designation',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'phoneNumber',
            title: 'Phone Number',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'departmentName',
            title: 'Department',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        },
        {
            field: 'country',
            title: 'Country',
            align: 'left',
            valign: 'bottom',
            sortable: true,
            width: '30%'
        }
    ]
});

Step 5

Now, open terminal and type start index.html to the HTML in browser

Terminal

In browser, we can see our page is loaded with data and all the options i.e column sorting, search, pagination, and export. 

Bootstrap Table Page with data load and options

Search 

Search

Sorting 

Sorting by Department

Pagination

Pagination

Export Options 

Export Options

Export to CSV

Export to CSV

Export to MS Excel

Export to MS Excel

Export to JSON

Export to JSON

Export to XML

Export to XML

Export to Text

Export to Text

Export to SQL

Export to SQL

Export to PDF

Export to PDF

I have added the source code as an attachment.


Similar Articles