How to load JSON data in DataTables from text file for pagination ? - GeeksforGeeks

18 Jan, 2021
We are very familiar with HTML tables which are used for storing related data. DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. Some features of DataTables are sorting, searching, pagination, and ordering of data. Many ways are available to get data into DataTables.
In this article, we will learn to load data from a text file in the DataTables which are ready for pagination or sorting.
The pre-compiled files which are needed to implement the codes 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
Example:
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>Datatables server side process</h2>      <!--HTML table with student data-->    <table id="tableID" class="display"         style="width: 100%;">        <thead>            <tr>                <th>StudentID</th>                <th>StudentName</th>                <th>Age</th>                <th>Gender</th>                <th>Marks Scored</th>            </tr>        </thead>        <tfoot>            <tr>                <th>StudentID</th>                <th>StudentName</th>                <th>Age</th>                <th>Gender</th>                <th>Marks Scored</th>            </tr>        </tfoot>    </table>      <script>              /* Initialization of datatable */        $(document).ready(function () {              /* Student's data loaded from             text file */            $('#tableID').DataTable({                "ajax": 'ajaxData.txt'            });        });    </script></body>  </html>
ajaxData.txt: The following is the data for students table written in “ajaxData.txt” file which is used in the JavaScript part of the above code.
{
    "data": [
        [
            "ST1",
            "Preeti",
            "35",
            "Female",
            "320"
        ],
        [
            "ST2",
            "Vincy",
            "36",
            "Female",
            "170"
        ],
        [
            "ST3",
            "Ashwini",
            "41",
            "Female",
            "860"
        ],
        [
            "ST4",
            "Kelly",
            "32",
            "Female",
            "433"
        ],
        [
            "ST5",
            "Satvik",
            "41",
            "male",
            "162"
        ],
        [
            "ST6",
            "William",
            "37",
            "Female",
            "372"
        ],
        [
            "ST7",
            "Chandan",
            "31",
            "male",
            "375"
        ],
        [
            "ST8",
            "David",
            "45",
            "male",
            "327"
        ],
        [
            "ST9",
            "Harry",
            "29",
            "male",
            "205"
        ],
        [
            "ST10",
            "Frost",
            "29",
            "male",
            "300"
        ],
        [
            "ST11",
            "Ginny",
            "31",
            "male",
            "560"
        ],
        [
            "ST12",
            "Flod",
            "45",
            "Female",
            "342"
        ],
        [
            "ST13",
            "Marshy",
            "23",
            "Female",
            "470"
        ],
        [
            "ST13",
            "Kennedy",
            "43",
            "male",
            "313"
        ],
        [
            "ST14",
            "Fiza",
            "31",
            "Female",
            "750"
        ],
        [
            "ST15",
            "Silva",
            "34",
            "male",
            "985"
        ]
    ]
}

Output:
Data loaded from file:
Search and pagination execution:
HTML-Misc
jQuery-Misc
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)
How to Insert Form Data into Database using PHP ?
How to position a div at the bottom of its container using CSS?
Types of CSS (Cascading Style Sheet)
Form validation using HTML and JavaScript
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?