Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 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  

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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" 
     </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :