Customize the default behaviour of your Datatable

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

[cc-code]

PHP Hurdles Data Table Customization




PHP Hurdles Data Table Customization demo

//Create a table with ID Example

Name Position Office
Saurabh Dubey Project Head PHP Hurdles
Manglesh Upadhyay Project Lead PHP Hurdles
Arvind Gupta Team Lead PHP Hurdles
Deepak Shah Sr. Developer ShirtsVilla
Saurabh Dubey Project Head PHP Hurdles
Manglesh Upadhyay Project Lead PHP Hurdles
Arvind Gupta Team Lead PHP Hurdles
Deepak Shah Sr. Developer ShirtsVilla
Saurabh Dubey Project Head PHP Hurdles
Manglesh Upadhyay Project Lead PHP Hurdles
Arvind Gupta Team Lead PHP Hurdles
Deepak Shah Sr. Developer ShirtsVilla
Saurabh Dubey Project Head PHP Hurdles
Manglesh Upadhyay Project Lead PHP Hurdles
Arvind Gupta Team Lead PHP Hurdles
Deepak Shah Sr. Developer ShirtsVilla
Saurabh Dubey Project Head PHP Hurdles
Manglesh Upadhyay Project Lead PHP Hurdles
Arvind Gupta Team Lead PHP Hurdles
Deepak Shah Sr. Developer ShirtsVilla

//Initialize the Datatable on table having id example

 

[/cc]

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

[cc-code]

[/cc]

2. How to fix the header of Data table:

Add Following CSS AND JS file in Head section
[cc-code]


[/cc]

and set the fixed header TRUE in data table initialization Like

[cc-code]


[/cc]

3. To add Consequetive Sno. in Datatable

Just create a variable which initalize the datatable, add a script and create td for SNO.
[cc-code]

[/cc]

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.
[cc-code]

[/cc]

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

[cc-code]

//Add data-sort attribute to the TD element and define sortable value in it.

//Also update the script and add columnDefs.

[/cc]

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

[cc-code]
//Add the script seperately

[/cc]

and then add the script which will enable the searching capability of the box
[cc-code]


[/cc]

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.

[cc-code]
To enable just add one line code

[/cc]

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 *