基于bootstrap 的datatable插件的使用2，php版
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。
ajax从后台获取数据（两种数组方式）：
第一种方式：
前端：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
<link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="display table table-striped table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
</table>
</div>
<script>
$(function(){
$('#DataTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "./server.php",
"type": "POST",
"data": function ( d ) { //添加额外的参数发送到服务器
d.extra_search = 3;
}
}
} );
})
</script>
</body>
</html>后端：
<?php
$data = array();
//$data['draw'] = 1;
$data['recordsTotal'] = 5;
$data['recordsFiltered'] = 5;
$data['data'] = array(
array("1","Airi","Satou","Accountant","Tokyo","2008/11/28",162700),
array("2","Angelica","Ramos","Chief Executive Officer (CEO)","London","2009/10/09",1200000),
array("3","Ashton","Cox","Junior Technical Author","San Francisco","2009/01/12",86000),
array("4","Bradley","Greer","Software Engineer","London","2012/10/13",132000),
array("5","Bradley","Greer","Software Engineer","London","2012/10/13",132000)
);
shuffle($data['data']); //模拟数据库获取数据 echo json_encode($data);exit;第二种方式：
前端：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
<link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="display table table-striped table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
</table>
</div>
<script>
$(function(){
$('#DataTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "./server.php",
"type": "POST",
"data": function ( d ) { //添加额外的参数发送到服务器
d.extra_search = 3;
}
},
"columns":[
{"data":"id"},
{"data":"name"},
{"data":"age"}
]
} );
})
</script>
</body>
</html>后端：
<?php
$data = array();
//$data['draw'] = 1;
$data['recordsTotal'] = 5;
$data['recordsFiltered'] = 5;
$data['data'] = array(
array("id"=>"1","name"=>"Airi","age"=>"Satou"),
array("id"=>"2","name"=>"Angelica","age"=>"Ramos"),
array("id"=>"3","name"=>"Ashton","age"=>"Cox"),
array("id"=>"4","name"=>"Bradley","age"=>"Greer"),
array("id"=>"5","name"=>"Bradley","age"=>"Greer")
);
shuffle($data['data']);
echo json_encode($data);exit;- 上一篇 »BootStrap【四、插件】
- 下一篇 »基于bootstrap的datatable控件