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.

» How to create a FAQ section

» jQuery fireworks animation effects using fireworks js

Category :: Jquery
Published :: 2 years ago At: 05:52 PM
Detailed Date :: May 22^nd, 2019
Writer :: Code

RECENT POSTS

1 week ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

1 month ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

1 month ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

1 month ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

1 month ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.

3 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

5 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

8 months ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Subscribe

jQuery DataTable Tutorial With Materialize CSS Design For Beginners

Tutorial on how to use it;

Related Post(s)