How to load data from JavaScript array using jQuery DataTables plugin ?

DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer's custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting, and searching.

The pre-compiled files which are needed for code implementation are  

CSS :

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript : 

//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

Approach:  The approach followed is passing dynamic data to the dataTable rather than passing information from any document. The steps taken are as follows.       

• Pass a JavaScript array dataSet for user's data with name, designation, salary, and address as data to be used.
• HTML table is used with table id as tableID.
• Datatable is initialized with the table id.
• In the script part, the JS array is passed by using the data option.
• Even the columns are dynamically created using the columns.title option.

Example: The following example demonstrates to load data from JavaScript array in datatables using the plugin.

Output: