Simple DataTable Customization-SearchBox|Button|Select|Filter

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.

 

4 thoughts on “Simple DataTable Customization-SearchBox|Button|Select|Filter

  1. Wamo

    Can you please to be able downloading data PDF format or excel?
    Thanks in advance

    Reply
  2. Wamo

    Thank you so much for putting this together.
    I was looking this functionality for days and days. All the jquery datatable.

    Reply
  3. jay

    you code is really help me but can you also add #listsearch function query also

    Reply
    1. vishal

      Hi Jay in term of me dom not working not able to create custom search,
      I followed same code.

      Reply

Leave a Reply

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