CODEWITHSUNDEEP
phpjqueryhtmldatatable
Dyem
Dyem

Reputation: 3

jQuery DataTable - Server-side processing (Pagination and search not working)

I'm working for a restfull api that will work on datatable server-side processing, returning json file fetch to a Datatable. All the data was fetch correctly but the pagination and search is not working. I think the issues are [draw], [recordsTotal], and [recordsFiltered]. Your help saves my life. Thanks!

Process: HTML request -> Jquery -> datatable.ajax.get -> PHP fetch data into the server -> return json file

Here is my code:

HTML

$(document).ready(function() {
	$('#example').DataTable( {
		"processing": true,
		"serverSide": true,
		"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
		"ajax": {
			"url": "api/auth",
			"type": "GET"
		},
		"columns": [
		{ "data": "first_name" },
		{ "data": "last_name" },
		{ "data": "position" },
		{ "data": "office" },
		{ "data": "start_date" },
		{ "data": "salary" }
		],
		 "columnDefs": [
            {
                "targets": [ 1 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 2 ],
                "visible": false
            }
        ],
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
	});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>

<body>
	<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
<!-- jQuery -->
</body>
</html>

PHP

$serverData = $db->query('SELECT * FROM employee_tb');
foreach ($serverData as $key => $value) {
$data[] = array( 'first_name'  => $value['first_name'], 
                 'last_name'   =>  $value['last_name'],
                 'position'    =>  $value['position'],
                 'office'      =>  $value['office'],
                 'start_date'  =>  $value['start_date'],
                 'salary'      =>  $value['salary']
        );
$dataCount = count($serverData);
}
$json_data = array('draw'  => 0, 'recordsTotal' =>  $dataCount, 'recordsFiltered' =>  $dataCount, 'data' =>  $data );
echo  json_encode($json_data);

Upvotes: 0

Views: 6187

Answers (1)

Kadir &#199;etintaş
Kadir &#199;etintaş

Reputation: 207

You are sending always draw="0" at your JSON response.

You should capture draw parameter from request and send back to draw parameter in the response.

Your PHP file last line;

$json_data = array('draw' => (isset($_REQUEST["draw"]) ? $_REQUEST["draw"] : 0), 'recordsTotal' =>  $dataCount, 'recordsFiltered' =>  $dataCount, 'data' =>  $data );

Your problem will be solved when you apply this.

Upvotes: 1

Related Questions