This post is 9th part of a series called Getting Started with Datatable 1.10 .
- DataTable demo (Server side) in Php,Mysql and Ajax
- DataTable (Server side) Custom Column Search
- Datatable Scroller (Server Side)
- DataTable Responsive (Server side)
- Datatable Custom Loader
- Datatable Colvis (Column Visibility Customization)
- DataTable Table tools
- DataTable Custom Search By Tags Input (Server side)
- DataTable Search By Datepicker (Server side)
- Datatable Bulk Delete (Server Side)
- 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" > < script type = "text/javascript" language = "javascript" src = "js/jquery.js" ></ script > < script type = "text/javascript" language = "javascript" src = "js/jquery.dataTables.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.
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 , 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 , 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
0 Comments