Adding jQuery dataTable with your page

Adding jQuery dataTable to your page part 1

DataTable Example

DataTable Example

Introduction of DataTable

Sometimes we need to show a list of data using table and also need to provide searching, pagination & sorting option with it. If we try to add it using raw php, it will be very tedious work for us. Here’s come a handy javascript table plugin named data Table. DataTable is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.You can add all of these stuffs(pagination, sorting, searching etc) quite easily & within a short time using it. I will explain  it sequentially using a very simple approach.

In this series we will cover following topics –

  • How to add dataTables with simple list page
  • AJAX loaded dataTables
  • How to use MYSQL join & union with dataTables
  • Add column filtering using yadcf plugin
  • Make our table responsive using responsive plugin
  • How to customize ssp library
  • Add extra feature with dataTables like state save option, change data after retrieving from database etc

Adding dataTables with simple list page

  1. First of all, we need to download necessary files from Otherwise, we can use cdn for including these files.

Let’s create a sample html file and save it as index.php

<!DOCTYPE html>
    <title>jQuery dataTable Example</title>
    <!-- CSS for twitter bootstrap & datatable -->
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="" >
    <!-- JS for twitter bootstrap & datatable -->
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
<table id="example" class="table table-striped table-bordered dt-responsive " cellspacing="0" >
<th>Product Name</th>
<th>Order Number</th>
<th>Ordered quantity</th>
<th>price Each</th>
<th>Order LineNumber</th>
<td>Product 2</td>
<td>Product 1</td>

We have added all the required css & js file for dataTables and also have added a table with sample data where we have set an ID named example. Later we will use this ID for calling dataTable for it.

2. Now for adding column filtering, sorting & pagination, we just need to call dataTables like this –


It’s pretty simple, you have no need to do anything more for it. You will find everything ready for you  🙂

Leave a Reply

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