Data Table

Introduction

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

How to Setup

HTML Structure

<table id="datable_1" class="table table-hover display pb-30">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	<tr>
		<td>Ashton Cox</td>
		<td>Junior Technical Author</td>
		<td>San Francisco</td>
		<td>66</td>
		<td>2009/01/12</td>
		<td>$86,000</td>
	</tr>
	....
	<tr>
		<td>Donna Snider</td>
		<td>Customer Support</td>
		<td>New York</td>
		<td>27</td>
		<td>2011/01/25</td>
		<td>$112,000</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</tfoot>
</table>

Dependency

CSS

<!-- Data Table CSS -->
<link href="vendors/datatables.net-dt/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="vendors/datatables.net-responsive-dt/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />

JS

<!-- Data Table JavaScript -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="vendors/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="dist/js/dataTables-data.js"></script>

Initialize Data Table JS

"use strict";
$('#datable_1').DataTable({
	responsive: true,
	autoWidth: false,
	language: { search: "",
	searchPlaceholder: "Search",
	sLengthMenu: "_MENU_items"	}
});

/*Export DataTable*/
$('#datable_1').DataTable( {
	responsive: true,
	dom: 'Bfrtip',
	language: { search: "",searchPlaceholder: "Search" },
	"bPaginate": false,
	"info":     false,
	"bFilter":     false,
	buttons: [
		{
                text: 'copy',
                className: 'btn btn-outline-light btn-sm'
            },
		{
                text: 'csv',
                className: 'btn btn-outline-light btn-sm'
            },
		{
                text: 'excel',
                className: 'btn btn-outline-light btn-sm'
            },
		{
                text: 'pdf',
                className: 'btn btn-outline-light btn-sm'
            },
		{
                text: 'print',
                className: 'btn btn-outline-light btn-sm'
            }
	]
} );