基于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;
基于bootstrap 的datatable插件的使用2（php版）的更多相关文章
- 基于bootstrap 的datatable插件的使用（php版）
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
- bootstrap-paginator基于bootstrap的分页插件
bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
- 基于Bootstrap的对话框插件bootstrap-dialog
写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
- 基于bootstrap的分页插件
之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- 基于bootstrap的bootstrap-editable插件实现即时编辑功能
1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...
- 基于bootstrap的双日历插件 daterangepicker
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
- 基于Bootstrap的表格插件bootstrap-table
写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...
- 基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
随机推荐
- a chip multiprocessor
COMPUTER OR GANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION A multicore computer ...
- input checkbox属性-Indeterminate状态
我们在使用input标签,多选框时,通常会看到两种状态,即选中(checked)和被选中(unchecked). // 选中状态也可写成checked="checked" chec ...
- Spark相关下载
HBase: http://hbase.apache.org/ Hadoop hadoop.apache.org spark http://spark.apache.org/
- hive --service metastore 出现的问题
Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083 执行命令jps root@hadoopm:/usr# jps1763 Res ...
- 升级到macOS 10.12 mysqlb报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
系统升级到macOS 10.12后启动mysql后,在终端输入mysql 报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' ...
- poi获取合并单元格内的第一行第一列的值
当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...
- JavaScript编码规范指南
前言 本文摘自Google JavaScript编码规范指南,截取了其中比较容易理解与遵循的点作为团队的JavaScript编码规范. JavaScript 语言规范 变量 声明变量必须加上 var ...
- Python模拟删除字符串两边的空白
目标: 1.使用string模块的whitespace 2.删除左边.右边以及两边的空白 代码如下: [root@localhost python]# cat rmspace.py #!/usr/bi ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- 如何把Excel中的某列数值如何转换成文本格式,且兼容性最好?
假设要把下方A列数值变成文本格式.有多种方法,其中下方的方法兼容性最好: 第一步:选择 A 列,然后,运行菜单 数据/分列... 命令,如下图: 第二步:默认 下一步: 第三步:默认 下一步: 第四步 ...