版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_38004619/article/details/89381497
jquery插件DataTable的使用实例
概念：中文文档地址：http://www.datatables.club/manual/
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5">
<tbody><tr>
<td>最小id:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>最大id:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<!--第二步：添加如下 HTML 代码-->
<table id="example" width="100%" border="1">
<thead>
<tr>
<th>ID</th>
<th>城市名</th>
<th>操作</th>
</tr>
<thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"processing": true,//开启加载中提示
"serverSide": true,//开启服务端交互
//ajax请求后台，data可以自定义搜索条件给后台传参数
"ajax" : {
'url':'./test.php',
'type':'post',
'data': function(d){
d.max_id = $('#max').val();
d.min_id = $('#min').val();
}
},
//定义的列，后台返回必须一一对应
"columns": [
{"data": "city_id"},
{"data": "city_name"}
],
//自定义操作列
"columnDefs": [
{
"targets": [2],
"data": "id",
"render": function(data, type, full) {
return "<a href='/test.php?id=" + data + "'>更新</a>";
}
}
],
//汉化重写
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
//事件当键盘输入触发一次table
$('#min, #max').keyup( function() {
table.draw();
} );
});
</script>
</body>
</html>后太代码
<?php
/* Connect to a MySQL server 连接数据库服务器 */
$link = mysqli_connect('localhost', 'root','pass','database');
$link ->set_charset("utf8");
$arr=[];
if ($result = mysqli_query($link, 'SELECT city_id,city_name FROM ecm_city WHERE city_id >'.$_POST['min_id'].' AND city_id < '.$_POST['max_id'].' LIMIT '.$_POST['start'].','.$_POST['length'].'')) {
/* Fetch the results of the query 返回查询的结果 */
while( $row = mysqli_fetch_assoc($result) ){
array_push($arr, $row);
}
/* Destroy the result set and free the memory used for it 结束查询释放内存 */
mysqli_free_result($result);
}
mysqli_close($link);
$num = count($arr);
$data_arr['draw']=$_POST['draw'];//前端传过来的
$data_arr['recordsTotal']=$num;//搜索后的条数
$data_arr['recordsFiltered']=443;//总条数
$data_arr['data']=$arr;//数据
$data=json_encode($data_arr);
echo $data;