BlueLemonCode.Com

Yet Another Tech Blog

Bootstrap Table For Quick And Fully Functional Grid

Introduction

In this short post I am going to discuss about an awesome jQuery plugin based on twitter bootstrap which looks awesome, covers majority of grid functionality and is very easy to customize.

I would like highlight the fact that this is not official plugin of twitter bootstrap, in fact there is no any official table plugin supported by twitter bootstrap and there are many open source plugins available.
The plugin that I have discussed below is officially called bootstrap table which is managed by Wenzhixin with community support.

I have effectively used this plugin in number of live applications and very happy with it's performance and features.

What's Bootstrap Table?

There are plenty of table/grid plugins in jQuery. jqGrid is possibly the most famous one and they all work very well. However, bootstrap table has following advantages
  • Supports Bootstrap theme (of course)
  • Works with data api. That means, no need to write single line of JavaScript for initialization
  • Lightweight with most of commonly used features
  • Seamless support for client and server side operations (like paging, sorting, search etc)
  • Decent documentation

Get Started

There's very clean and detailed documentation available for the plugin which can be found here so, I am not going to discuss the options and events of plugin.
Instead, I will create a sample table with server and client data modes and demonstrate how you can use Bootstrap table in asp.net application.

Before we start, you can check output of following example from official example page.
You will need to reference following files as prerequisite
bootstrap.js and bootstrap.css
jQuery.js
bootstrap table plugin files
For this example, I am using classic Northwind database.
Now, let's first create a MVC project with single web api service which returns all customer entities from Northwind database.

public IEnumerable<object> GetCustomers()
        {
            NorthwindEntities context = new NorthwindEntities();
            return context.Customers
                .Select(p => new
                {
                    p.CustomerID,
                    p.CompanyName,
                    p.Country,
                    p.City,
                    p.ContactTitle,
                    p.Phone
                }).AsQueryable();
        }

Now, lets write a html code to display a HTML table 

<table class="table table-bordered table-hover" data-toggle="table"
        data-url="../api/CustomerApi2" data-pagination="true" 
       data-search="true" data-smart-display="true" data-sort="true"        
       data-show-toggle="true" data-show-columns="true" 
       data-show-refresh="true" data-height="500" 
       data-sort-name="companyName" data-sort-order="asc" 
       data-side-pagination="client">    <thead>
        <tr>
            <th data-field="customerID" data-sortable="true">Customer ID</th>
            <th data-field="companyName" data-sortable="true">Company</th>
            <th data-field="country" data-sortable="true">Country</th>
            <th data-field="city" data-sortable="true">City</th>
            <th data-field="lastName" data-sortable="true">Contact Person</th>
            <th data-field="phone" data-sortable="false">Contact Phone</th>
        </tr>
    </thead>
</table>
That's all you need to have a fully functional grid with basic features. The sorting, paging (with fixed header), search and column selector.
That's right, no need to explicitly initialize the Bootstrap table.

What's More?

The most important advantage of Bootstrap table is the number of features and array of extensions.

For example, the above sample was using client side paging and sorting. What if you are working with large data and do not want to send all data from server every time.

Simply change the data attribute

data-side-pagination="server"

Bootstrap table will now send the selected page number and page size as query string to web API. You can then easily send the required set of records from web API... as below
public object GetCustomers()
        {
            var tempVar = Request.GetQueryNameValuePairs();
            var sortBy = tempVar.Where(p => p.Key == "sort").Select(p => p.Value).SingleOrDefault();
            var orderByMode = tempVar.Where(p=>p.Key=="order").Select(p=>p.Value).SingleOrDefault();
            var pageSize = tempVar.Where(p => p.Key == "limit").Select(p => Convert.ToInt16(p.Value)).Single();
            var pageIndex = tempVar.Where(p => p.Key == "offset")
                .Select(p => Convert.ToInt16(p.Value)).Single();

            NorthwindEntities context = new NorthwindEntities();
            var query = context.Customers
                .Select(p => new 
                {
                    p.CustomerID,
                    p.CompanyName,
                    p.Country,
                    p.City,
                    p.ContactTitle,
                    p.Phone
                }).AsQueryable();

            var rows = query
                .OrderBy(sortBy==string.Empty?"CustomerID" : sortBy)
                .Skip(pageIndex)
                .Take(pageSize)
                .ToList();

            return new
            {
                total = query.Count(),
                rows = rows
            };
        }
That's not all. Bootstrap table provides whole lot of other features out of the box, most of which can easily be enabled using data-attribute
check out these examples
Group column header
Formatting columns
Custom buttons in toolbar
Nested tables
Or these bootstrap table extensions
Editable cells
Multiple Sort
As I highlighted before, I have been successfully using Bootstrap table in number of live projects with plenty of customizations and I have found it very effective.

In fact, this post is my way of appreciating the great work guys have been doing to maintain this plugin.

Thanks for visiting and have fun using this great plugin.