fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
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;

  1. Adobe
  2. Los Angeles Times
  3. WELLS FARGO
  4. AT&T
  5. SONY
  6. NASA
  7. 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:

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.

Related Post(s)

» jQuery DataTable Tutorial With Materialize CSS Design For Beginners

» jQuery fireworks animation effects using fireworks js

» How to create a FAQ section

collections_bookmark Category :: Jquery
date_range Published :: 1 year ago At: 05:52 PM
event_note Detailed Date :: May 22nd, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share