How to load JSON data in DataTables from text file for pagination ?
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" />
< link rel = "stylesheet" href =
< script type = "text/javascript" src =
</ script >
< script type = "text/javascript" src =
</ script >
</ head >
< body >
< h2 >Datatables server side process</ h2 >
< 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:
Last Updated :
18 Jan, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...