In this article we will show you the solution of jQuery datatables example, here we are going to show you example to achieve result with the help of external dataTable files and dataTable(), ajax methods.
The open source dataTable css and js cdn files help you to implement dataTable example without error on webpage. Using ajax property you can inserts ajax format data into html table.
Step By Step Guide On jQuery Datatables Example :-
Here we defined html block with table, which consist of five headers and footers. In script block we defined ready() method where appending DataTable() method with table by specifying table id ‘example’.
The DataTable() function might appends with html table to display inbuilt DataTable structure with responsive and css styles.
Within this we specified ajax property to provide ajax external sample text file data. To successfully implement all specified process and get result you have to import open source cdn dataTable js and css files.
<!DOCTYPE html>
<html>
<head>
<title>DATATABLE AND AJAX</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
ajax: 'new/sample.txt',
});
});
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
Sample.txt
{
"data": [
[
"Nixon",
"System Architect",
"US",
"2009/04/25",
"$320,800"
],
[
"Garrett",
"Accountant",
"Tokyo",
"2011/07/25",
"$170,750"
],
[
"Ashton",
"Junior Trainee",
"San Francisco",
"2008/01/12",
"$86,000"
],
[
"Kelly",
"Javascript Developer",
"Edinburgh",
"2012/03/29",
"$433,060"
],
[
"Satou",
"Accountant",
"Russia",
"2010/11/28",
"$162,700"
]
]}
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- To get successful result make sure whether you imported open source dataTables css and js cdn links in head block. That is help you to implement or apply dataTable files on particular html program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method used to initialize concept which is implement within that there we specified DataTable() with table id ‘example’. Within this we specified ajax property to retrieve external sample text file data from local server then appends with html table.
- In html block we defined table with id attributes ‘example’ to specify table on script block. It contains five headers and footers data of ‘Name,Position,Office,Date,Salary’.
- In sample.txt file you have to define some of data, which is appends with html table in DataTable structure.
- At result you can sort each column data’s either ascending or descending order.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use dataTable with ajax in jquery.
Before execution of program we needs to confirm whether server starts and internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see defined text data with dataTable structure.
If you wants to change table data’s value to wanted values modify it accordingly or add two more rows of data.
I hope this article on jQuery datatables example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
