jQuery DataTable-服务器端处理(分页和搜索不起作用)

时间:2018-07-16 09:06:45

标签: php jquery html datatable

我正在为restfull api工作,它将在数据表服务器端处理上工作,将json文件提取返回到数据表。所有数据均已正确获取,但分页和搜索无法正常进行。我认为问题是 [绘制] [recordsTotal] [recordsFiltered] 。您的帮助挽救了我的生命。谢谢!

过程: HTML请求-> jQuery-> datatable.ajax.get-> PHP将数据提取到服务器中->返回json文件

这是我的代码:

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); 

1 个答案:

答案 0 :(得分:1)

您总是在JSON响应中发送 draw =“ 0”

您应该从请求中获取绘制参数,并在响应中发送回绘制参数

您的PHP文件最后一行;

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

应用此方法即可解决您的问题。