jQuery Datatables Ajax JSON Example PHP
Last Updated : Mar 11, 2024
IN - jQuery Ajax JSON PHP | Written & Updated By - Riya
In this article we will show you the solution of jQuery datatables ajax json example PHP, here we are going to show you retrieved database data into DataTable structure result with the help of ajax json.
In local server you have to read specified php file then retrieve them by ajax property. Retrieved data converting into json format by json_encode() method and appending on html table to print with table structures.
Step By Step Guide On jQuery Datatables Ajax JSON Example PHP :-
Here we defined table with id, class, width and cellspacing with respective values to apply responsive and css styles.
In script block we defined ready() method where appending DataTable() method with table by specifying table id ‘cusTbl’.
Within this we needs to specify processing, ajax, columns property with respective values.
In external php files we retrieving wanted database table data then converting database data into json and displayed result.
<!DOCTYPE html>
<html>
<head>
<title>Datatables And Php</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" charset="utf8" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#cusTbl').dataTable({
"processing": true,
"ajax": "fetch_data.php",
"columns": [
{data: 'UserName'},
{data: 'Password'},
{data: 'Email'}
]
});
});
</script>
</head>
<body>
<table id="cusTbl" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>User Name</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
</table>
</body>
</html>
Fetch_data.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'dbase') or die("Error " . mysqli_error($con));
$sql = "select UserName, Password, Email from loginrec";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_assoc($result)) {
$array[] = $row;
}
$dataset = array(
"echo" => 1,
"totalrecords" => count($array),
"totaldisplayrecords" => count($array),
"data" => $array
);
echo json_encode($dataset);
?>
- <!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.
- 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 ‘cusTbl’.
- Within this we need to specify ‘processing-true,ajax property to ‘fetch_data.php (external php file name)’, columns property help to appends retrieved database table columns on html table.
- In html block we defined table with id,class,width,cellspacing attributes respective values ‘cusTbl,display,100%,0’. Then we specified five values of header and footer for dataTable data.
- In external fetch_data.php file you have to excutes database connection then using select query retrieving all column records from table ‘loginrec’.
- Retrieved data storing on array by using while loop iteration then converting into json format with the help of json_encode() methods.
- Finally printing on html table to get dataTable structure with database table data’s.
- 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,json,php 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 retrieved database table data with dataTable structure.
If you wants to change table data’s value to then you have to provide existing another database table data into html table modify it accordingly.
Make sure whether you changed correctly without missing because that result will give you error instead of retrieved data.
I hope this article on jQuery datatables ajax json example PHP helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
