Part 3: jQuery Datatables Export to CSV Example & Demo

We have learned jQuery Datatables with the listing, searching, and pagination and jQuery Datatables Export to PDF in earlier datatables tutorial, Now I am extending that jQuery datatables tutorial and adding export jQuery Datatables to CSV file.

I am sharing step-by-step jQuery Datatables tutorials so that JavaScript beginners can adopt new things very easily. I can share all export features in a single file but I want to explain one by one jQuery datatables export format features with details.

You can also check other tutorials of export table data,

As per my previous jQuery datatables tutorials, we had table listing with export to pdf features in our jquery datatables source code, Now I am going to add export to CSV feature without flash in the current source code.

I will share the whole jQuery datatables source code and demo once this tutorial will complete. You can get the source code at the end of this tutorial. You are free to customize and use source code as per your need.

CSV stands for comma-separated-values is one of the most popular file format used to store tabular data in a database or spreadsheet, Normally every programming languages accept CSV format data to import and export data and store it into CSV file.

I am using jQuery datatables buttons extension to export jQuery Datatable to CSV datatable feature. The buttons extension provides,

Copy to clipboard
Save as Excel (XLSX)
Save as CSV
Save as PDF
Display a print view

Export jQuery Datatable to CSV Using Button Table tools

Step 1: We have to include all jQuery datatables library files into head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js"></script>

Step 2: Created HTML layout for jQuery datatables listing in index.html file.

<table id="listing" class="display" cellspacing="0" width="100%">

<thead>

<tr>

<th>User ID</th>


<th>Title</th>


<th>Body</th>

</tr>

</thead>

        
</table>

The table id is '#listing' and will use to instantiate jQuery Datatables on it.

Step 3: Now fetched data from restful web service and processed data as required for jQuery datatables.

var arrayReturn = [];
            $.ajax({
                url: "https://jsonplaceholder.typicode.com/posts",
                async: true,
                dataType: 'json',
                success: function (data) {
					for (var i = 0, len = data.length; i &lt; len; i++) {
						var desc = data[i].body;
						var title = data[i].title;
						var id = (data[i].id).toString();
						arrayReturn.push([id, '<a href="https://google.com" target="_blank">'+title.substring(0, 20)+'</a>', desc.substring(0, 120)]);
					}
				inittable(arrayReturn);
                }
            });

Step 4: Passed formatted data to datatables.

function inittable(data) {	
		$('#listing').DataTable({
			"aaData": data,
			"dom": 'lBfrtip',
			buttons: [
            {
                extend: 'Html5',
                text: 'Export to CSV',
				title: 'js-tutorials.com : Export to datatable data into CSV',
				 
				 download: 'open',
				 orientation:'landscape',
				  exportOptions: {
				  columns: ':visible'
				}
            }]
		} );
	}

I am using the buttons datatables plugin and added CSV button to export jQuery datatables into csv file.

You can download the source code and Demo from the below link.

Live Demo

Download Source Code

Part 3: jQuery Datatables Export to CSV Example & Demo

Export jQuery Datatable to CSV Using Button Table tools

Related

Leave a Reply Cancel reply