This post is 9th part of a series called Getting Started with Datatable 1.10 .

  1. DataTable demo (Server side) in Php,Mysql and Ajax
  2. DataTable (Server side) Custom Column Search
  3. Datatable Scroller (Server Side)
  4. DataTable Responsive (Server side)
  5. Datatable Custom Loader
  6. Datatable Colvis (Column Visibility Customization)
  7. DataTable Table tools
  8. DataTable Custom Search By Tags Input (Server side)
  9. DataTable Search By Datepicker (Server side)
  10. Datatable Bulk Delete (Server Side)
  11. Datatable Page Resize (Server Side)

I received many tutorial requests from my 42 Comments that asked to me how to integrate datepicker search in datatable custom column with server side data. So I have modified custom column search demo.

To integrate datepicker I have used jQueryui datepicker. You can go the site and grab the assets from there jQueryui and after existing assets.

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Now we’ll initialize the datatable

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
 
    var dataTable =  $('#employee-grid').DataTable( {
    processing: true,
    serverSide: true,
      ajax:"employee-grid-data.php" // json datasource
 
    });
});

Now hide the global default search

1
$("#employee-grid_filter").css("display","none");

In the markup we’ll add input text for each column

01
02
03
04
05
06
07
08
09
10
11
<thead>
    <tr>
        <td><input type="text" id="0"  class="employee-search-input"></td>
        <td><input type="text" id="1" class="employee-search-input"></td>
        <td><input type="text" id="2" class="employee-search-input" ></td>
        <td><input type="text" id="3" class="employee-search-input" ></td>
        <td><input type="text" id="4" class="employee-search-input" ></td>
        <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
        <td><input type="text" id="6" class="employee-search-input" ></td>
    </tr>
</thead>

Each input box has a common class attribute “employee-search-input” . in click or keyup or change event we’ll fetch column index and input value as below and draw a request for searching.
Here in 5th column we have added jquery datepicker by class “datepicker”

1
2
3
4
5
$('.employee-search-input').on( 'keyup click change', function () {
    var i =$(this).attr('id');  // getting column index
    var v =$(this).val();  // getting search input value
    dataTable.columns(i).search(v).draw();
} );

Now its time to set datepicker on “Joining Date ” column. So, by “datepicker” class I have initialized datepicker and some extra option like date format and clear button. You can found more here.
Also make input text readonly, that user will not able to put value through text box.

DataTable Search By Datepicker

01
02
03
04
05
06
07
08
09
10
11
$( ".datepicker" ).datepicker({
    dateFormat: "yy-mm-dd",
    showOn: "button",
    showAnim: 'slideDown',
    showButtonPanel: true ,
    autoSize: true,
    buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    closeText: "Clear"
});

Now Im clearing search value on click of “clear” button.

1
2
3
4
5
$(document).on("click", ".ui-datepicker-close", function(){
    $('.datepicker').val("");
    dataTable.columns(5).search("").draw();
});

So here is the full initialization code.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function() {
 
    var dataTable =  $('#employee-grid').DataTable( {
    processing: true,
    serverSide: true,
    ajax: "employee-grid-data.php", // json datasource
 
  } );
  
    $("#employee-grid_filter").css("display","none");  // hiding global search box
 
    $('.employee-search-input').on( 'keyup click change', function () {
        var i =$(this).attr('id');  // getting column index
        var v =$(this).val();  // getting search input value
        dataTable.columns(i).search(v).draw();
    } );
 
     $( ".datepicker" ).datepicker({
        dateFormat: "yy-mm-dd",
        showOn: "button",
        showAnim: 'slideDown',
        showButtonPanel: true ,
        autoSize: true,
        buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        closeText: "Clear"
    });
    $(document).on("click", ".ui-datepicker-close", function(){
        $('.datepicker').val("");
        dataTable.columns(5).search("").draw();
    });
} );

My server side code remain same as custom column search code. If you have any issue with server side set up then refer first post (DataTable demo (Server side) in Php,Mysql and Ajax Part:1) of this series. If you have any query comment below of this post.aligncenter size-large wp-image-187