Deepanshu Bisht

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

Datatable Jquery

DataTables is a powerful Javascript library for adding interaction features to HTML tables, and while simplicity is a core design principle for the project as a whole, it can be quite daunting to get started. In this article, I’ll introduce the basic concepts that you will need to know to get going with DataTables, and you will find that in a very short space of time you’ll be able to create advanced table controls, tuned to your specific requirements.

HTML requirements

All DataTables needs in your HTML is a well-formed table (with valid HTML), just add an id (or class) on your table and call that specific id ( or class) on your script.

Including the Javascript and CSS

The first thing to do when you want to use DataTables is to download the latest version from the DataTables download page. Unzip the downloaded file and upload it to your web server.

To be able to use DataTables on your page, you must first include the library in your web page; this is done using the

1. Using Datatables CDN –

2. Using Package managers like npm or bower –

After this, In Javascript, we need to initialize the DataTables.

That’s it. If we add some data to table and  run it, we’ll get something like this:

Features of Datatable: 

With Datatable you get multiple advanced functionality, some of the major functionality are :

  1. Pagination: Previous, Next, and Page Navigation.
  2. Instant Search: Filter result by text search.
  3. Multi-column ordering: Sort data of multiple columns at once.
  4. Datatable Length: To set the length of the table.

References:

Share