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;




 


												


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

    
						
  1. 基于bootstrap 的datatable插件的使用（php版）
		
    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
    
		
    2. 
								
  2. bootstrap-paginator基于bootstrap的分页插件
		
    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
    
		
    3. 
						
  3. 基于Bootstrap的对话框插件bootstrap-dialog
		
    写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
    
		
    4. 
						
  4. 基于bootstrap的分页插件
		
    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js.  ...
    
		
    5. 
						
  5. 基于Bootstrap的DropDownList的JQuery组件的完善版
		
    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
    
		
    6. 
						
  6. 基于bootstrap的bootstrap-editable插件实现即时编辑功能
		
    1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet"  ...
    
		
    7. 
						
  7. 基于bootstrap的双日历插件 daterangepicker
		
    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
    
		
    8. 
						
  8. 基于Bootstrap的表格插件bootstrap-table
		
    写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...
    
		
    9. 
						
  9. 基于bootstrap的时间选择插件daterangepicker以及汉化方法
		
    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. vm安装centos 老是出现 grub.conf 配置问题
			
    vm 环境 11  centos 6.5 最开始用的是vm12 发现安装软件一会就出现 客户机操作系统已禁用 cpu.请关闭或重置虚拟机 以为是新机器的cpu或者主板有问题,换vm,换系统依然会出现这 ...
    
			
    2. 
						
  2. RunLoop相关知识的总结
			
    RunLoop 即运行循环,也叫事件循环,本质为一个死循环.iOS一个程序运行起来之后,默认会开启一个运行循环,有需要处理的操作时,比如用户的输入事件时,RunLoop会自己跑起来运行,没有需要处理的 ...
    
			
    3. 
						
  3. js的forEach,for in , for of
			
    forEach遍历数组 [].forEach(function(value, index, array) { // ... }); 例子 var myArry =[1,2,3,4]; myArry.d ...
    
			
    4. 
						
  4. TweenMax学习一
			
    TweenMaxjs是一个性能很高的js动画框架,它与css3动画具有时间轴的概念.你可以很方便的把动画添加到一个时间轴队列里面去按照你需要的顺序去执行. 官网地址: http://greensock ...
    
			
    5. 
						
  5. JMeter学习-034-JMeter调试工具之一---HTTP Mirror Server
			
    通常,编程工具IDE都提供了相应的调试模块,供开发者使用,以便更快速的定位问题所在.那么在JMeter编写测试脚本的过程中,JMeter都提供了哪些调试工具供我们使用呢? JMeter常用的调试工具有 ...
    
			
    6. 
						
  6. test  [ ] 四类
			
    test可理解的表达式类型分为四类:     表达式判断     字符串比较     数字比较     文件比较 test xxx 可以简写成 [  xxx  ] 的形式,注意两端的空格.   1)判 ...
    
			
    7. 
						
  7. 阿里云docker镜像加速
			
    echo "DOCKER_OPTS=\"--registry-mirror=https://yeyieqis.mirror.aliyuncs.com\"" |  ...
    
			
    8. 
						
  8. Docker的镜像
			
    镜像是容器的运行基础,容器是镜像运行后台的形态 镜像的概念 镜像是一个包含程序运行必要依赖环境和代码的只读文件,它采用分层的文件系统,将每一次改变以读写层的形式增加到原来的只读文件上 镜像的系统结构  ...
    
			
    9. 
						
  9. 删除smartygit的配置文件
			
    SmartGit Windows: %APPDATA%\syntevo\SmartGit\OS X: ~/Library/Preferences/SmartGit/Unix/Linux: ~/.sma ...
    
			
    10. 
						
  10. NGINX、PHP-FPM开机自动启动
			
    NGINX SHELL脚本   放到/etc/init.d/下取名nginx #!/bin/sh # # nginx - this script starts and stops the nginx  ...
    
			
    11.