আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

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 https://datatables.net/download/index. Otherwise, we can use cdn for including these files.

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

<!DOCTYPE html>
<html>
<head>
    <title>jQuery dataTable Example</title>
    <!-- CSS for twitter bootstrap & datatable -->
    <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" >
    <!-- JS for twitter bootstrap & datatable -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered dt-responsive " cellspacing="0" >
<thead>
<tr>
<th>Product Name</th>
<th>Order Number</th>
<th>Ordered quantity</th>
<th>price Each</th>
<th>Order LineNumber</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 2</td>
<td>10261</td>
<td>36</td>
<td>110.80</td>
<td>165</td>
<td>Edit</td>
</tr>
<tr>
<td>Product 1</td>
<td>10167</td>
<td>33</td>
<td>110.60</td>
<td>16</td>
<td>Edit</td>
</tr>
</tbody>
</table>
</body>
</html>

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 –

$(document).ready(function(){
$("#example").DataTable();
});

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

Like to work with different type of web based application, have completed my graduation from RUET & I am a Zend Certified PHP Engineer and also a Certified Scrum Master, like agile methodologies for development. I am working as a Web Developer for 4+ years, specially experienced in Codeigniter and Laravel.

Leave a Reply

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