What is server-side Scripting is a web programming language whose data processing is carried out by a server/provider computer. This is needed when the data we are going to take is very much. Mostly when people are just learning PHP programming, they will display all the data in the database and just display it in the table, then what happens is the page that we open will be very over loaded. But with server-side you can divide the data limit to be displayed.
1. Create Database db_datatable and table dl_customer like this:
| # | Field | Type | Sort | Not Null | Extra |
|---|---|---|---|---|---|
| 1 | id | int(15) | AUTO_INCREMENT | ||
| 2 | name | varchar(126) | utf8mb4_general_ci | ||
| 3 | country | varchar(256) | utf8mb4_general_ci | ||
| 4 | phone | varchar(256) | utf8mb4_general_ci | ||
| 5 | address | varchar(256) | utf8mb4_general_ci | ||
| 3 | varchar(256) | utf8mb4_general_ci |
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
CREATE TABLE `dl_customer` (
`id` mediumint(8) UNSIGNED NOT NULL,
`name` varchar(255) DEFAULT NULL,
`country` varchar(100) DEFAULT NULL,
`phone` varchar(100) DEFAULT NULL,
`address` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `dl_customer`
ADD PRIMARY KEY (`id`);
ALTER TABLE `dl_customer`
MODIFY `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;
Enter as much data as possible.2. Create config.php
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "db_datatable"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3. Create data-ajax.php
<?php
include 'config.php';
$allquery = "SELECT * FROM `dl_customer`";
$getall = mysqli_query($con,$allquery);
$totalFiltered= (mysqli_num_rows($getall));
$requestData= $_REQUEST;
$queryna = "SELECT * FROM `dl_customer`";
if( !empty($requestData['search']['value']) ) {
$queryna.=" WHERE ( name LIKE '%".$requestData['search']['value']."%' ) ";
}
$queryna .= " ORDER BY id DESC";
$gettwo = mysqli_query($con,$queryna);
$totalFiltered = (mysqli_num_rows($gettwo));
$queryna .= " LIMIT ".$requestData['start']." ,".$requestData['length']."";
$result = mysqli_query($con,$queryna);
$no=$requestData['start']+1;
$outpenranking = array();
foreach ($result as $key=>$row) {
$getcustomer=array();
$getcustomer[] = $no++;
$getcustomer[] = $row['name'];
$getcustomer[] = $row['country'];
$getcustomer[] = $row['phone'];
$getcustomer[] = $row['address'];
$getcustomer[] = $row['email'];
$outpenranking[]=$getcustomer;
}
$outputcustomer = array(
'draw'=>intval( $requestData['draw'] ),
'recordsTotal'=> intval($totalFiltered),
'recordsFiltered'=> intval($totalFiltered),
'data'=>$outpenranking
);
echo json_encode($outputcustomer);
4. Create index.php
<!DOCTYPE html>
<html>
<head>
<title>Data Table Serverside</title>
</head>
<body>
<h2 align="center">Data Table Serverside</h2>
<link rel="stylesheet" type="text/css" 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>
<br>
<div class="container">
<div class="card card-body">
<form id="form-peserta">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Country</th>
<th>Phone</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</form>
<span class="loading"></span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ordering":false,
"scrollX": true,
"lengthMenu": [[10, 25, 50, 100, 1000, 2000], [10, 25, 50, 100, 1000, 2000]],
"ajax": {
url: 'data-ajax.php',
type: 'post'
}
} );
} );
</script>
</body>
</html>
0 Comments