How to export data using JQuery data-table plugin ?

Normally it takes lot of time to build tables using HTML and JQuery , with the help of JQuery datatable plugin we can easily build tables and add additional functionalities such as sorting, search , pagination and also exporting table content in to different format’s

Installing dependencies :

The below files which you need to include on your page to make it up and running those are datatable javascript and datatable css file, the datatable css file applies default styles but, you can override this by adding your own custom styles

These files perform basic operations, like search , pagination, sorting etc…, to get additional functionalities you need to add additional plugins

The next step is to add the below javascript on head section of your HTML page, the functionality of this snippet is the AJAX request hits the jsonplaceholder rest api and gets the dummy json Array and then iterate JSON array and build a javascript array by reading title of each JSON Object

Next, you need to assign items collection to the data object of datatable in the document.ready function and also you can define columns and buttons for data table, the buttons are export buttons, when you click on any button it will read the array object and export into the respective format

Now, open your page in browser, it should look something like below, without any export buttons

datatables

To get export buttons you need to add below javascript files in the header section of page

Now, after refreshing page, you can see export buttons ( refer below screen shot )

datatablesone

To apply styles for buttons use below classes

Finally, the page appears something like below when you click on excel button it should export content into excel format

datatablestwo

Leave a Reply

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

Visit Us On FacebookVisit Us On Google PlusVisit Us On Twitter