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 :
- Pagination: Previous, Next, and Page Navigation.
- Instant Search: Filter result by text search.
- Multi-column ordering: Sort data of multiple columns at once.
- Datatable Length: To set the length of the table.
References:
