JQuery responsive dataTable with fixed columns

What is JQuery DataTable ?

Answer: DataTables is a plug-in for the jQuery which can provide lots of functionalities.
Some of them are as follows:

Pagination
Instant search
Column Sorting
Fixed Table columns on lower resolution
Fixed Table header
Selecting particular row and lot more..

Sometime there is a requirement that we have to use fixed columns for table with search and pagination features. Custom pagination with fixed column for table can be tricky to implement, specially for responsive website. In this case JQuery DataTable can be a very good solution.

In this chapter we will see how to create responsive table with fixed columns. We will be using Twitter Bootstrap to make responsive table.
First Let's add all necessary CSS and JavaScript libraries.

Add following CSS files in head tag of your HTML file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">

Then add following JS files

<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js" type="text/javascript" ></script>

Now you can add your HTML Table like below snippet

<div class="container-fluid">
  <div class="col-md-12">
    <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
           
       
        </tbody>
    </table>
  </div>
</div>

Your HTML Table is ready by now and we can initialize this table using dataTable.
We have already added JQuery, so when DOM gets ready, we can initialize out dataTable. Add following Script below all your JS files or create an external JS and add at the bottom of HTML.

$(document).ready(function() {
    var table = $('#example').DataTable( {       
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        autoWidth: false,
        fixedColumns: {
            leftColumns: 2                  
        }
    } );
} );

Here we initialized our table with 2 left fixed columns. DataTable can be initialize with lot more options. For all other options please refer to DataTable Options link

Preview

See the Pen Bootstrap jquery dataTable fixed columns by Yashwant Patel (@yashwant) on CodePen.

Download Source

Post Tags:

DataTable Fixed DataTable jQuery Twitter Bootstrap