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

18 Jan, 2021
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.
HTML
<!DOCTYPE html><html>  <head>    <meta content="initial-scale=1, maximum-scale=1,         user-scalable=0" name="viewport" />      <meta name="viewport" content="width=device-width" />      <!-- Datatable plugin CSS file -->    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />       <!-- jQuery library file -->     <script type="text/javascript"          src="https://code.jquery.com/jquery-3.5.1.js">     </script>        <!-- Datatable plugin JS library file -->     <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">     </script></head>  <body>    <h2>load data from JavaScript array using Datatables</h2>      <!--HTML table with student data-->    <table id="tableID" class="display" style="width:100%">        <thead>            <tr>                <th>User name</th>                <th>Designation</th>                <th>Salary</th>                <th>Address</th>                <th>City</th>                            </tr>        </thead>    </table>      <script>    var dataSet = [    [            "Tina Mukherjee",       "BPO member",       "300000",        "24,chandni chowk",        "Pune"        ],    [     "Gaurav",      "Teacher",      "100750",      "esquare,JM road",      "Pune"         ],    [       "Ashtwini",              "Junior engineer",         "860000",          "Santa cruz",        "mumbai"        ],    [         "Celina",              "Javascript Developer",         "430060",         "crr lake side ville",         "tellapur"         ],    [        "Aisha",              "Nurse",         "160000",        "rk puram",        "Delhi"         ],    [        "Brad henry",              "Accountant",         "370000",          "chaurasi lane",        "Kolkatta"         ],    [         "Harry",             "Salesman",         "130500",         "32, krishna nagar",         "Navi mumbai"        ],    [      "Rhovina",      "Amazon supporter",      "300900",          "Aparna zone",      "hyderabad"     ],    [      "Celina",      "Senior Developer",      "200000",      "23, chandni chowk",      "pune"      ],         [      "Glenny",      "Administrator",       "200500",       "Nagpur",       "Maharashtra"        ],    [      "Brad Pitt",       "Engineer",       "100000",        "sainikpuri",        "Delhi"      ],    [         "Deepa",             "Team Leader",         "200500",             "Annanagar",        "Chennai"        ],         [      "Angelina",              "CEO",         "1000000",           "JM road",        "Aundh pune"            ] ];      $(document).ready(function() {        $('#tableID').DataTable( {            data: dataSet,            columns: [                { title: "Name" },                { title: "Designation" },                { title: "Salary" },                { title: "Address" },                { title: "City" }                                     ]        } );    } );</script></body>  </html>
Output:
Before execute:
After execute:
CSS-Misc
HTML-Misc
jQuery-Plugin
HTML
JavaScript
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request