Datatables使用

一、简介

官网:https://datatables.net/ 中文官网:http://datatables.club/

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。操作DOM的

  • 分页,即时搜索和排序,
  • 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
  • 各式各样的扩展: Editor, TableTools, FixedColumns ……
  • 丰富多样的option和强大的API
  • 支持国际化
  • 超过2900+个单元测试
  • 免费开源
  • 更多特性请到官网查看

二、使用

1、引入相关js和css文件

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

2、添加HTML代码

table标签中thead、tbody必须存在

<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

3、初始化Datatables

$(document).ready( function () {
$('#table_id_example').DataTable();
} );

4、效果

三、常用选项

order

应用于表的初始顺序(排序) stateSave

 # 参数1 列索引按顺序排列 从0开始
# 参数2 排序的规则
"order": [[ 1, "asc/desc" ],...]

stateSave

状态保存 - 页面重新加载时恢复表状态 启用或禁用状态保存。启用后,DataTables将存储状态信息,例如分 页位置,显示长度,过滤和排序。当最终用户重新加载页面时,表的状态将被更改以匹配他们之前设置的状 态。

# 默认值 false
stateSave: true/false

columnDefs

设置列定义初始化属性 此参数允许您为表中的列指定特定选项,但在这种情况下,定义的列选项可应用于一 个或多个列

"columnDefs":[
//索引第4列,不进行排序
{targets:[4],orderable:false}
]

lengthMenu

定义在每页显示记录数的select中显示的选项

$('#example').DataTable({
"lengthMenu": [ 10, 25, 50, 75, 100 ]
});
# 或
$('#example').DataTable({
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
});

paging

是否允许表格分页 true/false

默认:true

searching

是否允许Datatables开启本地搜索 true/false

默认:true

ordering

是否允许Datatables开启排序 true/false

默认:true

processing

是否显示正在处理的状态 true/false

默认:false

四、Ajax使用远程数据

有时从DOM读取数据太慢或太笨重,特别是在处理数千或数百万个数据行时。为了解决这个问题, DataTables的服务器端处理功能提供了一种方法,可以让服务器端的数据库引擎完成所有“繁重的工作” 。

当使用服务器端处理时,DataTables将在页面上每次绘制信息时向服务器发出Ajax请求(即,在分页,排 序,搜索等时)。DataTables将向服务器发送许多变量,以允许它执行所需的处理,然后以DataTables所需 的格式返回数据。

1、客户端

$('#example').DataTable( {
// 开启服务器模式
serverSide: true,
// ajax发起请求
ajax: {
// 请求地址
url: '/data-source',
// 请求方式 get/post
type: 'get',
// 头信信息 laravel post请求时 csrf
//headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
// 请求的参数
/*
data: {
"user_id": 451
},
*/
/*
// 两者写法效果一致 但是它用于搜索
data: function ( d ) {
d.user_id = $('#user_id').val();
}
*/
},
// columns要对tr中的td单元格中的内容进行数据填充
// 注意:如果data接收类似a或b的信息,实际服务器没有返回该信息,那么一定要同时设置
//defaultContent属性,否则报错
columns: [
// 总的数量与表格的列的数量一致,不多也不少
// 字段名称与sql查询出来的字段时要保持一致,就是服务器返回数据对应的字段名称
// defaultContent 和 className 可选参数
{'data':'字段名称1',"defaultContent": "默认值",'className':'类名'},
{'data':'字段名称n',"defaultContent": "默认值",'className':'类名'}
],
/*
创建tr/td时的回调函数,可以继续修改、优化tr/td的显示,里边有遍历效果,会依次扫描生成的每个tr
row:创建好的tr的dom对象
data:数据源,代表服务器端返回的每条记录的实体信息
dataIndex:数据源的索引号码
*/
createdRow:function(row,data,dataIndex){}
} );

2、服务端

/*
draw: 客户端调用服务器端次数标识
recordsTotal: 获取数据记录总条数
recordsFiltered: 数据过滤后的总数量
data: 获得的具体数据
注意:recordsTotal和recordsFiltered都设置为记录的总条数
*/
$result = [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered' => $count,
'data' => $data
];
return json_encode($result);

3、搜索

var table = $('#example').DataTable( {
ajax: "data.json"
} );
$('#search').on('click',function(){
table.api().ajax.reload();
});

4、实例

以laravel为例

服务器

public function index(Request $request){
if ($request->ajax()){
//排序索引
$orderArr = $request->get('order')[0];
//排序索引
$column = $orderArr['column'];
//排序方式
$dir = $orderArr['dir'];
//排序字段
$orderColumn = $request->get('columns')[$column]['data']; //开启位置
$start = $request->get('start',0);
//搜索关键字
$title = $request->get('title');
$query=Article::where('id','>',0); if (!empty($title)){
$query->where('title','like',"%$title%");
} //获取记录数
$length = min(100,$request->get('length',10));
$count = $query->count();
$articles = $query->orderBy($orderColumn,$dir)->offset($start)->limit($length)->get()->toArray(); /**
* draw:客户端调用服务端标识
* recordsTotal:获取数据记录总条数
* recordsFiltered:数据过滤后的总数量
* data:获取具体的数据
*/
return [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered'=>$count,
'data'=>$articles
];
}
return view('admin.article.index');
}

blade模板

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>
<body>
<form onsubmit="return search()">
<input type="text" name="title" id="title" placeholder="请输入搜索关键字">
<input type="submit" value="搜索">
</form>
<div class="page-container">
<table class="table table-border table-bordered table-bg table-sort">
<thead>
<tr>
<th scope="col" colspan="7">文章列表</th>
</tr>
<tr class="text-c">
<th>ID</th>
<th>文章标题</th>
<th>创建时间</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table>
</div>
</body>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var table = $('.table-sort').DataTable({
"order": [[ 0, "desc" ]],
"columnDefs":[
{targets:[4],orderable:false}
],
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ],
"processing" : true,
serverSide: true,
ajax: {
url: '',
type: 'get',
data:function (ret) {
ret.title = $('#title').val()
}
},
columns: [
{'data':'id'},
{'data':'title'},
{'data':'created_at'},
{'data':'updated_at'},
{'data':'updated_at'}
],
createdRow:function(row,data,dataIndex){
var id = data.id;
var td = $(row).find('td:last-child');
var html = `<a>编辑</a>&nbsp;&nbsp;
<a >删除</a>`;
td.html(html)
}
}); function search(){
table.ajax.reload();
return false;
}
</script>
</html>

jquery表格插件Datatables使用、快速上手的更多相关文章

  1. 一款比较强大的jquery表格插件Datatables

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...

  2. JQuery表格插件DataTables 当前页合计功能

    公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...

  3. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  4. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  5. JQuery表格插件

    http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件   博主是一个java后端程序员,前端技术会 ...

  6. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...

  7. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  8. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  9. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  10. intellij idea 13&amp;14 插件推荐及快速上手建议 (已更新!)

    原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转 ...

随机推荐

  1. Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

  2. Java应用程序实现屏幕的&quot;拍照&quot;

    有时候,在Java应用程序开发中,如:远程监控或远程教学,常常需要对计算机的屏幕进行截取,由于屏幕截取是比较接近操作系统的操作,在Windows操作系统下,该操作几乎成了VC.VB等的专利,事实上,使 ...

  3. Viewport解决分辨率适配问题

    Viewport :   字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致.   基本写法: &l ...

  4. 教程-Delphi调用C# WEBSERVICE(二)

    第二步:将webserivce的WSDL导入到该dll工程中,如何导,方法至少有两种,我说简单的一种:  file->new->other->WebService->WSDL ...

  5. Oracle SQL Lesson (10) - 使用DDL语句创建和管理表

    数据库对象TableViewSequenceIndexSynonym 对象名称最长30个字符,不能与当前用户下其他对象重名.create table "select" as sel ...

  6. 要你的祝福.lrc

    要你的祝福(电影<我是路人甲>插曲 试听版) - 李潇潇 午夜的温度慢慢起舞 穿梭的人潮有些荒芜 开始欢呼 开始麻木 谁被谁在安抚 落单的幸福变得模糊 孤单的城市独自起舞 也许满足 也许糊 ...

  7. JMX - JMX定义

    JMX定义 JMX超详细解读 https://www.cnblogs.com/dongguacai/p/5900507.html 开源框架是如何通过JMX来做监控的(一) - JMX简介和Standa ...

  8. Js的运算符

    JS的运算符 1.运算符的分类: a) 算数运算符 b) 字符串运算符 c) 赋值运算符 d) 比较运算符 e) 逻辑运算符 f) 位运算符 g) 其他运算符 2.算数运算符 + 加法运算符 - 减法 ...

  9. 跨域请求中预检请求options之坑

    一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...

  10. CF1131D Gourmet choice(并查集,拓扑排序)

    这题CF给的难度是2000,但我感觉没这么高啊…… 题目链接:CF原网 题目大意:有两个正整数序列 $a,b$,长度分别为 $n,m$.给出所有 $a_i$ 和 $b_j(1\le i\le n,1\ ...