DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
　　客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
　　服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

ajax从后台获取数据（两种数组方式）：

第一种方式：

  1. 前端：
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.     <!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
  8.     <link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
  9.  
  10.     <script src="./js/jquery-3.1.1.min.js"></script>
  11.     <script src="./js/jquery.dataTables.min.js"></script>
  12.     <script src="./js/dataTables.bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15.     <div class="container">
  16.         <table id="DataTable" class="display table table-striped table-bordered">
  17.             <thead>
  18.                 <tr>
  19.                     <th>id</th>
  20.                     <th>name</th>
  21.                     <th>age</th>
  22.                 </tr>
  23.             </thead>
  24.         </table>
  25.     </div>
  26.     <script>
  27.         $(function(){
  28.             $('#DataTable').DataTable( {
  29.                 "processing": true,
  30.                 "serverSide": true,
  31.                 "ajax": {
  32.                     "url": "./server.php",
  33.                     "type": "POST",
  34.                     "data": function ( d ) {        //添加额外的参数发送到服务器
  35.                         d.extra_search = 3;
  36.                     }
  37.                 }
  38.             } );
  39.         })
  40.     </script>
  41. </body>
  42. </html>
  1.  
  1. 后端：
  1. <?php
  2. $data = array();
  3. //$data['draw'] = 1;
  4. $data['recordsTotal'] = 5;
  5. $data['recordsFiltered'] = 5;
  6. $data['data'] = array(
  7.     array("1","Airi","Satou","Accountant","Tokyo","2008/11/28",162700),
  8.     array("2","Angelica","Ramos","Chief Executive Officer (CEO)","London","2009/10/09",1200000),
  9.     array("3","Ashton","Cox","Junior Technical Author","San Francisco","2009/01/12",86000),
  10.     array("4","Bradley","Greer","Software Engineer","London","2012/10/13",132000),
  11.     array("5","Bradley","Greer","Software Engineer","London","2012/10/13",132000)
  12. );
  13. shuffle($data['data']);      //模拟数据库获取数据 
  14. echo json_encode($data);exit;
  1.  

第二种方式：

  1. 前端：
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.     <!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
  8.     <link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
  9.  
  10.     <script src="./js/jquery-3.1.1.min.js"></script>
  11.     <script src="./js/jquery.dataTables.min.js"></script>
  12.     <script src="./js/dataTables.bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15.     <div class="container">
  16.         <table id="DataTable" class="display table table-striped table-bordered">
  17.             <thead>
  18.                 <tr>
  19.                     <th>id</th>
  20.                     <th>name</th>
  21.                     <th>age</th>
  22.                 </tr>
  23.             </thead>
  24.         </table>
  25.     </div>
  26.  
  27.     <script>
  28.         $(function(){
  29.             $('#DataTable').DataTable( {
  30.                 "processing": true,
  31.                 "serverSide": true,
  32.                 "ajax": {
  33.                     "url": "./server.php",
  34.                     "type": "POST",
  35.                     "data": function ( d ) {        //添加额外的参数发送到服务器
  36.                         d.extra_search = 3;
  37.                     }
  38.                 },
  39.                 "columns":[
  40.                       {"data":"id"},
  41.                       {"data":"name"},
  42.                       {"data":"age"}
  43.                   ]
  44.             } );
  45.         })
  46.     </script>
  47. </body>
  48. </html>
  1.  

　　后端：

  1. <?php
  2. $data = array();
  3. //$data['draw'] = 1;
  4. $data['recordsTotal'] = 5;
  5. $data['recordsFiltered'] = 5;
  6. $data['data'] = array(
  7.     array("id"=>"1","name"=>"Airi","age"=>"Satou"),
  8.     array("id"=>"2","name"=>"Angelica","age"=>"Ramos"),
  9.     array("id"=>"3","name"=>"Ashton","age"=>"Cox"),
  10.     array("id"=>"4","name"=>"Bradley","age"=>"Greer"),
  11.     array("id"=>"5","name"=>"Bradley","age"=>"Greer")
  12. );
  13. shuffle($data['data']);
  14. echo json_encode($data);exit;
  1.  

基于bootstrap 的datatable插件的使用2（php版）的更多相关文章

  1. 基于bootstrap 的datatable插件的使用（php版）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...

  2. bootstrap-paginator基于bootstrap的分页插件

    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...

  3. 基于Bootstrap的对话框插件bootstrap-dialog

    写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...

  4. 基于bootstrap的分页插件

    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...

  5. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  6. 基于bootstrap的bootstrap-editable插件实现即时编辑功能

    1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...

  7. 基于bootstrap的双日历插件 daterangepicker

    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...

  8. 基于Bootstrap的表格插件bootstrap-table

    写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...

  9. 基于bootstrap的时间选择插件daterangepicker以及汉化方法

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...

随机推荐

  1. Oracle数据库基础知识2

    字符操作相关_1 1.CONCAT关键字作用:连接字符串语法:CONCAT(字串1, 字串2)例如: CONCAT('hello','world') FROM DUAL; 注意:Oracle的CONC ...

  2. ECMAScript Web APIs node.js

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...

  3. OpenGL中实现双缓冲技术

    在OpenGL中实现双缓冲技术的一种简单方法: 1.在调用glutInitDisplayMode函数时, 开启GLUT_DOUBLE,即glutInitDisplayMode(GLUT_RGB | G ...

  4. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  5. Maven的依赖和传递性质

    1. 引入项目所需jar包 Maven项目直白的一大特点就是一般情况下不需要去自行下载jar包以及目标jar包的依赖包并导入,只需要在去Maven的中央仓库http://mvnrepository.c ...

  6. 适应laytpl 渲染模板数据

    前言 当我们异步读取数据过来的时候,还要通过手动赋值,显示在页面上吗,那样你就太OUT了,哥告诉你个新方式. 那就是 laytpl 插件 用法一:渲染单条数据 <table id="B ...

  7. redis3.2新增属性protected mode

    在安装新版redis时(3.2) , 一直出现问题 , 只能本机连接其他机器访问失败 , 后来发现是新版增加了安全机制 在配置文件里可以发现多出了protected-mode这一项 , 如果为yes ...

  8. WordPress基础：Gravatar头像修正

    WordPress会根据你的邮箱,从Gravatar获取你的头像,如果没有在Gravatar设置头像,将使用默认的,然而设置了之后显示还可能会出现以下问题: Gravatar头像读取困难,将影响网站读 ...

  9. chrome一直提示adobe flash player 因过期而遭阻止

    链接:https://www.zhihu.com/question/32223811/answer/128088278 很多新用户在安装了Chrome浏览器或者更新过的的时候,经常提示 adobe f ...

  10. php try catch throw 用法

    1.try catch 捕捉不到fatal error致命错误 2.只有抛出异常才能被截获,如果异常抛出了却没有被捕捉到,就会产生一个fatal error. 3.父类可以捕获抛出的子类异常,Exce ...