DataTables ajax Option

Last Updated : 24 May, 2022

DataTables is a jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.

The ajax option is used to get the data from the source and display the table body from a number of sources, including from an Ajax data source, using this initialization parameter. After getting the file reference, we can use columns.data to access the specified object property.

Syntax:

{
    "data": [
        ...
    ]
}

$('Selector').dataTable( {
  "ajax": "data.json"
} );

Property Value: This property accepts three different types of values that are discussed below:

string: It is used to set the URL of the source from where the data should be loaded.
object: It is used to define the properties for jQuery.ajax.
function: It is used to describe the custom data get to function.

Example: This example describes how ajax option works to access data from file.

Filename: geeks.json – This file represents the data in JSON format.

Javascript

{ 
    "data": [ 
        { 
            "id": 1, 
            "name": "Akash", 
            "address": "Noida"
        }, 
        { 
            "id": 2, 
            "name": "Deepak", 
            "address": "Noida"
        }, 
        { 
            "id": 3, 
            "name": "Rakesh", 
            "address": "Delhi"
        }, 
        { 
            "id": 4, 
            "name": "Adarsh", 
            "address": "Delhi"
        }, 
        { 
            "id": 5, 
            "name": "Arun", 
            "address": "Noida"
        }, 
        { 
            "id": 6, 
            "name": "Aryan", 
            "address": "Delhi"
        }, 
        { 
            "id": 7, 
            "name": "Anant", 
            "address": "Lucknow"
        }, 
        { 
            "id": 8, 
            "name": "Baba", 
            "address": "Lucknow"
        }, 
        { 
            "id": 9, 
            "name": "Bhavesh", 
            "address": "Lucknow"
        }, 
        { 
            "id": 10, 
            "name": "Binay", 
            "address": "Noida"
        } 
    ] 
}

HTML

<html> 
  
<head> 
    <!-- jQuery -->
    <script type="text/javascript" src= 
        "https://code.jquery.com/jquery-3.5.1.js"> 
    </script> 
  
    <!-- DataTables CSS -->
    <link rel="stylesheet" href= 
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"> 
  
    <!-- DataTables JS -->
    <script src= 
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3>DataTables ajax Option</h3> 
    </center> 
  
    <table id="tableID" class="display"> 
        <thead> 
            <tr> 
                <th>ID</th> 
                <th>Name</th> 
                <th>Address</th> 
            </tr> 
        </thead> 
    </table> 
  
    <script> 
  
        // Initialize the DataTable 
        $(document).ready(function () { 
            $('#tableID').dataTable({ 
                "ajax": "geeks.json", 
                "columns": [ 
                    { 'data': 'id' }, 
                    { 'data': 'name' }, 
                    { 'data': 'address' } 
                ] 
            }); 
        }); 
    </script> 
</body> 
  
</html>