jQuery DataTable Tutorial With Materialize CSS Design For Beginners

DataTables is a plug-in for the jQuery Javascript library.

It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

DataTables is used by people at these fine companies like;

Adobe
Los Angeles Times
WELLS FARGO
AT&T
SONY
NASA
CISCO among other

DataTables has only one library dependency - jQuery. Being a jQuery plug-in, DataTables makes use of many of the excellent features that jQuery provides, and hooks into the jQuery plug-in system.

It can appear quite daunting to get started. However, taking those first steps and getting DataTables running on your website is actually quite straight forward as you need only include two additional files in your page ie:

The DataTables CSS file
The DataTables Javascript file from DataTables official web site.

Tutorial on how to use it;

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used.

copy


<html>

<head>
 <title>Hello World</title>
</head>

<body>
	<table id="sampleData">
		<thead>

		</thead>

		<tbody>

		</tbody>

		<tfoot>

		</tfoot>

	</table>
</body>

</html>

If you are generating/looping your HTML tags using a server-side program, such as a PHP script you need to output that data inside the (tbody) section.

For this plug-in to work you need to assign a class or an id to the table tag as shown the above example and finally call this single function shown below.

Note: We are targeting the element with the id of sampleData and thats our table tag.

copy

$(document).ready( function () {
  $('#sampleData').DataTable();
});

If you want to customize your DataTable, this can be done by specifying configuration parameters in an object passed to the DataTable() function. For more details watch the video above.

Category :: Jquery
Published :: 4 months ago At: 05:52 PM
Writer :: Code