Simple DataTable Customization-SearchBox|Button|Select|Filter

Last Updated on

In this code we will implement datatable using bootstrap for better styling with following customization:-

  • Changing the default searchbox of datatable.
  • Adding buttons.
  • Creating the classic filter using bootstrap inputgroup which will contain a select box, textbox and submit button.

Output of the code will be like this:-
datatable

 

This code is divided mainly in three parts which will exist in single html file say test.html

1.Head Section
2.Body Section
3.Datatable Script Section

Head Section

In Header Section I have used the CDN(library) for Jquery,DataTable and Bootstrap.

  • Jquery(3.4.1)version CDN is required to run datatable.
  • Datatable(1.10.20)version CDN includes its CSS and its own Jquery library.
  • Bootstrap(3.4.0)version CDN for CSS is used for elegant styling.

You can also download these libraries from their respective websites if you don’t want to use CDN.

 

Body Section

This section has two parts – One is table top and other is table itself.

For first part I used the bootstrap container and divided the container row in three columns horizontally using col-lg class from bootstrap

  • First column will contain the datatable search box.
  • Second column will contain buttons.
  • Third column will contain filter.

In second part you will see the datatable  with table id=”myTable” which will show table records and datatable other features like pagination.

 

Datatable Script Section

In this last section I have used the script tag for implementing the data table.

I have put the datatable in dTable variable with the following attributes

  • bLengthChange = If this is true then this gives option for changing the number of records shown in the UI table.
  • lengthMenu = this is used to limit the number of records per page. I have set it to 4 so it will show only 4 records per page.
  • columnDefs = It is used to position the text in the column so I have set it to show all text at the center.
  • “dom”:”lrtip” = this option is used to hide the default search box of datatable but it doesn’t disable the search feature of datatable hence we have used the customized searchbox with <div> id=”myCustomSearchBox” using the dtable.search() in this section and  shown in the outcome picture above.

 

Now lets create final test.html by combining all the three sections(Head, Body and Datatable Script).

Copy the below code to your test.html file and run it on the browser to see the required result of datatable customization.

 

Leave a Reply

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