基于bootstrap 的datatable插件的使用2（php版）
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。
ajax从后台获取数据（两种数组方式）：
第一种方式：
前端：
<!doctype html> <html lang="en"> <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 id="DataTable" 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 lang="en"> <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 id="DataTable" 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;
