Jquery datatables export excel

Since: Buttons 1.0.0

Create and save an Excel CSV file that contains the data from the table.

Please note — this property requires the Buttons extension for DataTables.

Description

This button type serves as a proxy that will automatically detect if the excelHtml5 button can be used based on the browser’s capabilities and the libraries available on the page.

This is provided as an option since the HTML5 button type requires a reasonably modern browser which may not always be available to the end user.

If the requirements of the excelHtml5 button are not satisfied, no button will be presented to the end user. For the requirements of each button type, please refer to its own documentation.

Styling and customisation

For information on how you can customise the created XLSX file, please refer to the Customisation section in the excelHtml5 button documentation.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

Examples

$('#myTable').DataTable( {
	buttons: [
		'excel'
	]
} );

$('#myTable').DataTable( {
	buttons: [
		{
			extend: 'excel',
			text: 'Save current page',
			exportOptions: {
				modifier: {
					page: 'current'
				}
			}
		}
	]
} );

jQuery Datatables provides a convenient way to export data to Excel format. This jQuery Datatables tutorial help to create export datatable to excel format using HTML5 and buttons table tools. The excel file format are using .xls and .xlsx extension.

Excel is one of the most popular file formats used to store tabular data in spreadsheets. We can use Excel format data to import and export data and store into an excel file.

You can use this functionality only latest browsers and above IE8. The Buttons extension for DataTables provides three plug-ins that provide overlapping functionality for data export.

• HTML5 export buttons – makes use of HTML5 APIs to create files client-side
• Flash export buttons – uses Adobe Flash for legacy browsers
• Print button

You can also check other tutorials of export table data,

• Exporting a DataTable into PDF File
• Exporting a DataTable to CSV
• DataTables Export to Excel using HTML5
• Popular JavaScript and jQuery PDF Viewer Plugins

I am extending excelHtml5 so that you can use export to excel only on the latest browser, not on a legacy browser. I am explaining step by step jQuery datatable export to excel tutorial.

I am extending the previous tutorial that’s why I will change the extension format and label from the previous Export jQuery datatable to pdf tutorial.

We have learned Export Datatable to CSV and Export Datatable to PDF in earlier datatables tutorials, Now I am extending this datatables tutorial and adding export datatable to Excel file.

Exporting jQuery Datatables data to Excel File

Step 1: We need to include all datatables library files in the head section of index.html file. Let’s include the jQuery library, jQuery Datatables library, and the Buttons extension library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>

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

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

Step 4: Now I will pass formatted data to the jQuery datatables "aaData" property.

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

in the above code, I am using excelHtml5 plugin to overlap excel export functionality using html5 api. I have added the title and button text as well.

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

Do you know jQuery Datatables supports to exports it’s data to different file format like Excel sheet, CSV (comma-separated values) and PDF by using PHP script with Ajax. That means if we have use jQuery Datatables plugin has been use for display our dynamic data in tabular format on web page then it is very easy for us to export jQuery Datatables data to Excel, CSV and PDF file format.

Currently we want to make Excel, CSV or PDF file from HTML table we have to mainually copy data from webpage to different file and make CSV or Excel or PDF file for our data. But this jQuery Datatables plugin has feature for export table data into different file format like Excel, CSV, PDF. We want to just enable this feature in Datatables at the time of initialization of this plugin. We have to add some jQuery Datables library for enable this feature.

So, In this post you can find Data exporting functionality by using jQuery Datatables plugin with PHP script and Ajax. There are many viewers has request us to add this type of tutorial, so we have publish this tutorial on our website. In this tutorial we have step by step describe how to export data from jQuery Datatables to Excel sheet, CSV file, Copy into Clipboart and make PDF file from Data using PHP script with Ajax.

If you want to use this data export feature in your project, so first you have to load all data on web page, because this functionality only export only those data which we can see on web page. So for export all data to different file we want to first load on web page then after we can export into Excel, CSV, PDF. Otherwise it will export only those data which we can see on web page, not export whole data to Excel or CSV or PDF file format.

Source Code

database_connection.php

First we have to make database connection, so we can fetch data from Mysql database and display on webpage.

<?php

//database_connection.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

?>

index.php

After making of database connection, We have to go to index.php file, here we can see we have imported jQuery Datatables library for enable export button feature for this we have to import following library into our index.php file.

<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>

By using this library we can enable export button feature in jQuery Datatables. After this we have define HTML table for initialization jQuery Datatable plugin on this page based on id selectore #customer_data. After this we have initialize this plugin by using Datatable() method. In this method we have define Ajax request which has been send to fetch.php for fetch data from Mysql table display on web page. For make export button we have add dom: ‘lBfrtip’, option. This option will make export button above jQuery Datatable and for button name we have add buttons option. In this option we can define which button we want to display on web page. This whole source code you can find below.

<html>
 <head>
  <title>Export jQuery Datatables Data to Excel, CSV, PDF using PHP Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/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>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container box">
   <h3 align="center">Export jQuery Datatables Data to Excel, CSV, PDF using PHP Ajax</h3>
   <br />
   <div class="table-responsive">
    <table id="customer_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Customer Name</th>
       <th>Gender</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
     </thead>
    </table>
   </div>
  </div>
  <br />
  <br />
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){

  $('#customer_data').DataTable({
   "processing" : true,
   "serverSide" : true,
   "ajax" : {
    url:"fetch.php",
    type:"POST"
   },
   dom: 'lBfrtip',
   buttons: [
    'excel', 'csv', 'pdf', 'copy'
   ],
   "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
  });
  
 });
 
</script>

fetch.php

This file has received ajax request for fetch data from Mysql database. Here you can find complete PHP script for fetch data from Mysql table and send this data to Ajax request in json format.

<?php

//fetch.php

include('database_connection.php');

$column = array('CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country');

$query = "SELECT * FROM tbl_customer ";

if(isset($_POST['search']['value']))
{
 $query .= '
 WHERE CustomerName LIKE "%'.$_POST['search']['value'].'%" 
 OR Gender LIKE "%'.$_POST['search']['value'].'%" 
 OR Address LIKE "%'.$_POST['search']['value'].'%" 
 OR City LIKE "%'.$_POST['search']['value'].'%" 
 OR PostalCode LIKE "%'.$_POST['search']['value'].'%" 
 OR Country LIKE "%'.$_POST['search']['value'].'%" 
 ';
}

if(isset($_POST['order']))
{
 $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= 'ORDER BY CustomerID DESC ';
}

$query1 = '';

if($_POST['length'] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
 $sub_array = array();
 $sub_array[] = $row['CustomerName'];
 $sub_array[] = $row['Gender'];
 $sub_array[] = $row['Address'];
 $sub_array[] = $row['City'];
 $sub_array[] = $row['PostalCode'];
 $sub_array[] = $row['Country'];
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT * FROM tbl_customer";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 'draw'    => intval($_POST['draw']),
 'recordsTotal'  => count_all_data($connect),
 'recordsFiltered' => $number_filter_row,
 'data'    => $data
);

echo json_encode($output);

?>

Database

By using below SQL script you can make customer table in your database.

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_customer`
--

CREATE TABLE `tbl_customer` (
  `CustomerID` int(11) NOT NULL,
  `CustomerName` varchar(250) NOT NULL,
  `Gender` varchar(30) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_customer`
--

INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Gender`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Female', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Female', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Male', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', 'Male', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),
(5, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'Male', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Male', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', 'Male', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),
(9, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'John Koskitalo', 'Male', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(39, 'Ann Devon', 'Female', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),
(38, 'Janine Labrune', 'Female', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),
(37, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(36, 'Elizabeth Brown', 'Female', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),
(30, 'Trina Davidson', 'Female', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),
(31, 'Jeff Putnam', 'Male', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(32, 'Joyce Rosenberry', 'Female', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),
(33, 'Ronald Bowne', 'Male', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(34, 'Justin Adams', 'Male', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),
(35, 'Pedro Afonso', 'Male', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil'),
(100, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(101, 'Tonia Sayre', 'Female', '84 Haslemere Road', 'ECHT', 'AB32 2DY', 'United Kingdom'),
(102, 'Loretta Harris', 'Female', 'Avenida Boavista 71', 'SANTO AMARO', '4920-111', 'Portugal'),
(103, 'Sean Wong', 'Male', 'Rua Vito Bovino, 240', 'Sao Paulo-SP', '04677-002', 'Brazil'),
(104, 'Frederick Sears', 'Male', 'ul. Marysiuska 64', 'Warszawa', '04-617', 'Poland'),
(105, 'Tammy Cantrell', 'Female', 'Lukiokatu 34', 'HAMEENLINNA', '13250', 'Finland'),
(106, 'Megan Kennedy', 'Female', '1210 Post Farm Road', 'Norcross', '30071', 'United States'),
(107, 'Maria Whittaker', 'Female', 'Spresstrasse 62', 'Bielefeld Milse', '33729', 'Germany'),
(108, 'Dorothy Parker', 'Female', '32 Lairg Road', 'NEWCHURCH', 'HR5 5DR', 'United Kingdom'),
(109, 'Roger Rudolph', 'Male', 'Avenida Julio Saul Dias 78', 'PENAFIEL', '4560-470', 'Portugal'),
(110, 'Karen Metivier', 'Female', 'Rua Guimaraes Passos, 556', 'Sao Luis-MA', '65025-450', 'Brazil'),
(111, 'Charles Hoover', 'Male', 'Al. Tysiaclecia 98', 'Warszawa', '03-851', 'Poland'),
(112, 'Becky Moss', 'Female', 'Laivurinkatu 6', 'MIKKELI', '50120', 'Finland'),
(113, 'Frank Kidd', 'Male', '2491 Carson Street', 'Cincinnati', 'KY 45202', 'United States'),
(114, 'Donna Wilson', 'Female', 'Hallesches Ufer 69', 'Dettingen', '73265', 'Germany'),
(115, 'Lillian Roberson', 'Female', '36 Iolaire Road', 'NEW BARN', 'DA3 3FT', 'United Kingdom');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  ADD PRIMARY KEY (`CustomerID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=116;

So, this is complete source code of How to export jQuery Datatables data to Excel, CSV, PDF and Copy in Clipboard using PHP Ajax. If you have any query regarding this tutorial you can comment in comment box.

DataTables is a popular pagination jQuery library. It has many features like – search filter, sorting, change default page length, etc. One of them is the export feature.

It has the following export options – copy, pdf, csv, and excel.

In this tutorial, I show how you can add export buttons in DataTable.

Contents

1. Table
2. Database Configuration
3. HTML & PHP
4. Script
5. Demo
6. Conclusion

1. Table

I am using employees table in the example.

CREATE TABLE `employees` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Database Configuration

Create a config.php for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. HTML & PHP

Include CSS & JS

Include DataTables and jQuery library. To enable export in DataTables require including other CSS and JS files –

<!-- Datatable CSS -->
<link href='https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
<link href='https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css' rel='stylesheet' type='text/css'>

<style type="text/css">
.dt-buttons{
   width: 100%;
}
</style>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>

Load Data

Create <table id='empTable' > and fetch all records from employees table.

Loop on fetched records and add <table > rows.

Completed Code

<?php 
include "config.php";
?>
<!doctype html>
<html>
<head>
   <title>How to Export DataTables data in PDF, CSV, and Excel format</title>

   <!-- Datatable CSS -->
   <link href='https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
   <link href='https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css' rel='stylesheet' type='text/css'>

   <style type="text/css">
   .dt-buttons{
       width: 100%;
   }
   </style>

   <!-- jQuery Library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <!-- Datatable JS -->
   <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
   <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>

</head>
<body >

   <div >

     <!-- Table -->
     <table id='empTable' class='display dataTable'>
        <thead>
           <tr>
              <th>Employee name</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Salary</th>
              <th>City</th>
           </tr>
        </thead>
        <tbody>
        <?php

           ## Fetch records
           $empQuery = "select * from employees";
           $empRecords = mysqli_query($con, $empQuery);
           
           while ($row = mysqli_fetch_assoc($empRecords)) {
        ?>
              <tr>
                 <td><?= $row['emp_name'] ?></td>
                 <td><?= $row['email'] ?></td>
                 <td><?= $row['gender'] ?></td>
                 <td><?= $row['salary'] ?></td>
                 <td><?= $row['city'] ?></td>
              </tr>
        <?php
           }
        ?>
        </tbody>
     </table>
   </div>

</body>

</html>

4. Script

Initialize DataTables on <table id='empTable' >.

Add dom: 'Blfrtip' and buttons option where specific export button details.

In the example, I am adding copy, pdf, csv, and excel export buttons.

By default, DataTables export all visible columns but you can control it using exportOptions.

Specify the column index position which needs to export in columns. In the example, I specified 0,1 columns for pdf export.

Here, 0 is Employee name, and 1 is Email column.

Use it similarly for other export buttons.

Completed Code

$(document).ready(function(){
  var empDataTable = $('#empTable').DataTable({
     dom: 'Blfrtip',
     buttons: [
       {  
          extend: 'copy'
       },
       {
          extend: 'pdf',
          exportOptions: {
            columns: [0,1] // Column index which needs to export
          }
       },
       {
          extend: 'csv',
       },
       {
          extend: 'excel',
       } 
     ] 

  });

});

5. Demo

View Demo

6. Conclusion

Using the above script you can easily add export buttons in the DataTables.

But there is one issue officially export feature doesn’t work properly when serverSide: true.

If you have set serverSide: true then I will suggest you create custom buttons to export data instead of using the default one.

If you found this tutorial helpful then don’t forget to share.