Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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=
  
     <!-- 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=
     </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:



Last Updated : 18 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads