jQuery Datatables Ajax Json Example
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Riya
In this article we will show you the solution of jQuery datatables ajax json example, HTML is amended to include a tables tag with an id for the display. The code for rendering the datatable is placed below the html.
The data attribute receives the json data. But, simply supplying the data won't cause the table to render correctly.
The columns must be converted into json object elements. columns attribute contains a data property that makes this translation easier.
DataTables can read information from practically every JSON data source which may be accessed by Ajax.
The simplest way to achieve this is to set a ajaxDT option towards the URL of a JSON data source.
Further configuration options like changing how and why the Ajax request was made are also available with the ajaxDT option.
For additional details, refer to the ajaxDT documentation and other such Ajax examples for DataTables.
DataTables will assume that because an array data source is to be utilized, and it will read the data from the array of the row using the column index in order to display it for each column.
This makes dealing using arrays very simple (notice that this can be altered, and objects used may use the columns. dataDT choice
Step By Step Guide On Jquery Datatables Ajax Json Example :-
<!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=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<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>
<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>
- The very first step would be to type <HTML>, which informs the browser of the HTML version we're using.
- The project header should be described using the <head> tag. Both title & final brackets are both open, as contrast to the closed final rounds.
- Next, the <script> tag was included. The script tag also contains a description of the code or file we utilised, together with the javascript Google API run.
- Afterwards the script gets shut down.
- The <script> tag was then once more opened before being appended. The script tag also contains a description of the code or file we utilised, alongside the details of the javascript Google API run.
- After that, we head and close the script.
- After this comes the <body> tags, which describes the content of the webpage.
- Next, a table is made.
- After that, we used the </body></html> tag to end the programme.
Conclusion :-
HTML tables, which are used to store related data, are quite familiar to us.
Modern jQuery plugin DataTables enables us to add sophisticated controls and interactive components into HTML tables on you websites.Sorting,searching,pagination, and data ordering are some aspects of DataTables.
There are numerous ways to enter data into DataTables.
I hope this article on jQuery datatables ajax json example helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
