Customize the default behaviour of your Datatable

No votes yet.
Please wait...

Hey, Mates

Most of us will be using the Data tables in our projects and software but many few of us know the extendability and power of data tables how we can customize the behavior of default data tables as per our own need.

So the motive of our this tutorial will be to tell you about what all features you can enable in a data table.

Firstly let us start with implementing the data table.

Create a file datatable.php and create table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>


PHP Hurdles Data Table Customization

<!--Bootstrap CDN-->
<!--Data Table css-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!--Jquery Library-->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <!--Datatable js-->

<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align: center;">PHP Hurdles Data Table Customization demo</h2>
//Create a table with ID Example
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saurabh Dubey</td>
<td>Project Head</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Manglesh Upadhyay</td>
<td>Project Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>Team Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Deepak Shah</td>
<td>Sr. Developer</td>
<td>ShirtsVilla</td>
</tr>
<tr>
<td>Saurabh Dubey</td>
<td>Project Head</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Manglesh Upadhyay</td>
<td>Project Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>Team Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Deepak Shah</td>
<td>Sr. Developer</td>
<td>ShirtsVilla</td>
</tr>
<tr>
<td>Saurabh Dubey</td>
<td>Project Head</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Manglesh Upadhyay</td>
<td>Project Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>Team Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Deepak Shah</td>
<td>Sr. Developer</td>
<td>ShirtsVilla</td>
</tr>
<tr>
<td>Saurabh Dubey</td>
<td>Project Head</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Manglesh Upadhyay</td>
<td>Project Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>Team Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Deepak Shah</td>
<td>Sr. Developer</td>
<td>ShirtsVilla</td>
</tr>
<tr>
<td>Saurabh Dubey</td>
<td>Project Head</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Manglesh Upadhyay</td>
<td>Project Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>Team Lead</td>
<td>PHP Hurdles</td>
</tr>
<tr>
<td>Deepak Shah</td>
<td>Sr. Developer</td>
<td>ShirtsVilla</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
//Initialize the Datatable on table having id example
<script>
         
         $(document).ready(function() {
    $('#example').DataTable();
} );
         </script>

&nbsp;

Now Upon Creating The Datatable, we will customize the behavior of the Datatable one by one.

1. Control Default feature on the Datatable: We can enable and disable the default features like searching and pagination in the data table like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
         
         $(document).ready(function() {
    $('#example').DataTable({
       
       
         "paging": true,   //Set Pagination true and false
      "lengthChange": false,       //Set Length Change true and false
      "searching": false,         //Turn Searching true and false
      "ordering": true,          // turn ordering true and false
      "info": true,
      "autoWidth": false
       
        });
} );
         </script>

2. How to fix the header of Data table:

Add Following CSS AND JS file in Head section

1
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>

and set the fixed header TRUE in data table initialization Like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
         
         $(document).ready(function() {
    $('#example').DataTable({
       
       
      "paging": true,
      "lengthChange": true,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,   //For Responsive
    "fixedHeader": true    //For Fix Header
       
        });
} );
         </script>

3. To add Consequetive Sno. in Datatable

Just create a variable which initalize the datatable, add a script and create td for SNO.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
         
         $(document).ready(function() {

//Create Variable t
   var t =  $('#example').DataTable({
       
       
         "paging": true,
      "lengthChange": true,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,  
    "fixedHeader": true    
       
        });
       
//For Consecutive Numbers
         t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );
         </script>

4. To change the default Pagination Menu Length in Data Table: To Change the default length just add lengthMenu with all the length options you want to have.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
             
             $(document).ready(function() {
       var t =  $('#example').DataTable({
           
           
             "paging": true,
          "lengthChange": true,
          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],  // Change the length to 10,25,50 and ALL
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true,  
        "fixedHeader": true  
           
            });
           
             t.on( 'order.dt search.dt', function () {
            t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();
    } );
             </script>

5. To Instruct Datatable to sort according to Number Format for particular Field.

Firstly we will initialise columnDefs and will define the type of column it is whether it’s a number field or a text field and add data-sort attribute in the TD element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//Add data-sort attribute to the TD element and define sortable value in it.


//Also update the script and add columnDefs.

<script>
             
             $(document).ready(function() {
       var t =  $('#example').DataTable({
           
           
             "paging": true,
          "lengthChange": true,
          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true,  
        "fixedHeader": true ,  
       
        "columnDefs": [  //define the type of column i.e number or text to instruct datatable to sort as
                                   per it

    { "type": "num-fmt", "targets": 4 },   //Here 4 is the column No. i.e 4th column
{ "type": "num-fmt", "targets": 6 }
  ]
           
            });
           
             t.on( 'order.dt search.dt', function () {
            t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();
    } );
             </script>

6. To Enable Data searching within the column: To Enable data searching within the columns we need to add new script which will simply add the search box at foot of the table and then add a script to make it searchable

1
2
3
4
5
6
7
8
//Add the script seperately
<script>

 $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
</script>

and then add the script which will enable the searching capability of the box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
//Here t is the variable used to initialize the datatable you can change it if you have different variable.
 t.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
       
     });

</script>

7. Saving the State of the Datatable: By saving state we mean if you are performing some searching in data table and suddenly page reloads in normal condition all your search results along with the search terms will be lost but by enabling the save state method you will be redirected back to where you left it’s very time-saving for you.

1
2
3
4
5
6
7
8
9
10
11
12
To enable just add one line code

<script>

 var t =  $('#example').DataTable({
           
         
    "stateSave": true
       

 });
</script>

So we tried to show you the few glimpse of what all a simple Data Table can do and how powerful it is in handling your precious data.

We have prepared a quick demo having all the features enabled only made for our hard working developers to assist them in their daily development works.Just Download PHP Hurdles Datatable Customization Demo. and enjoy.

Because We believe Hurdles aren’t really Hurdles.

Cheers!

Be First to Comment

Leave a Reply

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