Datatables表格插件学习
Datatables 是一款
jquery表格插件。它是一个高度灵活的工具，能够将任何HTML表格添加高级的交互功能，能够很方便的实现分页，即时搜索和排序。javascript
1、简单使用
怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。php
$(document).ready(function(){
$('#myTable').DataTable();
});
开始使用DataTables很简单，只须要引入两个文件， 一个css样式文件和DataTables自己的脚本文件。在DataTables CDN上，可使用下面这两个文件：css
http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
2、选项
datatables中大量的选项能够用来定制你的表格展示给用户。html
1. 设置选项(Setting options)
datatables的配置是经过设置你定义的选项来完成的，以下：java
$('#example').DataTable( {
paging: false
} );
经过设置paging选项，禁止表格分页(默认是打开的)jquery
假设你要在表格里使用滚动，你须要加上scrollY选项：ios
$('#example').DataTable( {
scrollY: 400
} );
固然你能够组合多个选项来初始化datatables，启动滚动条，禁用分页ajax
$('#example').DataTable( {
paging: false,
scrollY: 400
} );
若是你有其余须要能够加入更多的选项来配置你的表格，更多datatables选项，请参考json
经常使用选项(Common options)
下面列举了一些比较有用的选项:bootstrap
ajax - 异步数据源配置 data - javascript数据源配置 serverSide - 开启服务器模式 columns.data - 配置每一列的数据源 scrollX - 水平滚动条 scrollY - 垂直滚动条 默认设置(Setting defaults)
在实际项目中，可能须要用到多个表格，你使用dom选项把全部的表格设置为相同的布局，这时你可使用$.fn.dataTable.defaults 对象处理。
在这个例子中,咱们禁用datatable中默认的搜索和排序功能,但当表初始化时启用了排序(重写默认选项)。
// 默认禁用搜索和排序
$.extend( $.fn.dataTable.defaults, {
searching: false,
ordering: false
} );
// 这样初始化，排序将会打开
// 搜索功能仍然是关闭
$('#example').DataTable( {
ordering: true
} );
http://datatables.net/manual/...
3、服务器处理(Server-side processing)
是否是发如今处理太多 DOM 数据或者 AJAX 一次性把数据得到后，DataTables 表现的不是很满意？这是确定的， 由于 DT 须要渲染，建立 tr/td ,因此数据越多，速度就越慢。 为了解决这个问题 DataTables 提供了 服务器模式，把原本客户端所作的事情交给服务器去处理， 好比排序（order）、分页（paging）、过滤（filter）。对于客户端来讲这些操做都是比较消耗资源的， 因此打开服务器模式后不用担忧这些操做会影响到用户体验。
当你打开服务器模式的时候，每次绘制表格的时候，DataTables 会给服务器发送一个请求（包括当前分页，排序，搜索参数等等）。DataTables 会向 服务器发送 一些参数 去执行所须要的处理，而后在服务器组装好 相应的数据 返回给 DataTables。
开启服务器模式须要使用 serverSideOption 和 ajaxOption ajax不定时一讲 选项，进一步的信息，请参考下面的 配置选项。
一、DT自动请求的参数(Sent parameters)
当开启了 服务器模式时，DataTables 会发送以下参数到服务器
二、服务器须要返回的数据(Returned data)
一旦 DataTables 发送了请求，上面的参数就会传送给服务器，那么你须要接受到这些参数并作相应的逻辑处理而后按照下面的格式讲组装好的JSON数据返回 （不是每一个参数都须要接受处理，根据本身的业务须要）
除了上面的返回参数之外你还能够加入下面的参数，来实现对表格数据的自动绑定
4、小试牛刀
1.ajax 获取所有数据，显示在本地
test.html
<html>
<head>
<meta charset="utf-8">
<title>测试Datatable-表单插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
<script>
// 1.本地数据
/*
$(document).ready(function() {
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
];
//而后 DataTables 这样初始化：
$('#example').DataTable( {
data: data
} );
} );
*/
// 二、ajax - 异步测试，数组形式
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "api/arrays.txt"
} );
} );
///三、ajax - 对象形式 https://datatables.net/examples/ajax/objects.html
/*
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
*/
} );
</script>
</html>
arrays.txt
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012/12/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012/08/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010/10/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009/09/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012/10/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012/09/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011/09/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009/06/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011/12/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010/09/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009/10/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010/12/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010/11/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011/06/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010/03/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011/08/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011/06/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009/10/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011/05/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008/10/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011/03/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009/12/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008/12/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010/02/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009/02/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008/12/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008/09/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011/02/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011/05/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009/08/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013/08/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009/07/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012/04/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010/01/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012/06/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013/02/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011/12/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011/03/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009/02/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010/07/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008/11/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011/06/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011/01/25",
"$112,000"
]
]
}
注意，要和数据对象区分开：
{
"data": [
{
"user_name": "刘德华",
"cn": "andyLau",
"uid": "546L6LbF",
"telephonenumber": "15820226337",
"account_source": "大湾区",
"businesscategory": "娱乐总监",
"add_time": null,
"sort": 1
},
{
"user_name": "周润发",
"cn": "Jaychou",
"uid": "5p2O5Zu95qCL",
"telephonenumber": null,
"account_source": null,
"businesscategory": null,
"add_time": null,
"sort": 2
},
]
}
2.服务器处理
$(function () {
// $("#example1").DataTable();
$('#sso_table').DataTable({
//开启服务器模式
serverSide: true,
ajax: '/data-source',
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
test.html 页面
<html>
<head>
<meta charset="utf-8">
<title>测试Datatable-表单插件-服务器处理</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
<script>
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "./data-source/index.php"
} );
} );
</script>
</body>
</html>
服务器端：index.php
<?php
//获取Datatables发送的参数 必要
$draw = $_GET['draw'];//这个值做者会直接返回给前台
//排序
// $order_column = $_GET['order']['0']['column'];//那一列排序，从0开始
// $order_dir = $_GET['order']['0']['dir'];//ase desc 升序或者降序
//搜索
// $search = $_GET['search']['value'];//获取前台传过来的过滤条件
//分页
$start = $_GET['start'];//从多少开始
$length = $_GET['length'];//数据长度
$limitSql = '';
// $length = 10;
$var = $start . "-". $length;
file_put_contents('../data.txt', $var, FILE_APPEND);
$recordsTotal = 100;
$recordsFiltered = 100;
$infos = array();
for($i=0; $i < $length; $i++)
{
$tmp = array(
getRandChar(3),
getRandChar(6),
'广州',
'珠江新城',
date("Y-m-d H:i:s"),
'20000',
);
$infos[] = $tmp;
}
/*
* Output 包含的是必要的
*/
echo json_encode(array(
"draw" => intval($draw),
"recordsTotal" => intval($recordsTotal),
"recordsFiltered" => intval($recordsFiltered),
"data" => $infos
),JSON_UNESCAPED_UNICODE);
// 生成随机字符串
function getRandChar($length)
{
$str = null;
$strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
$max = strlen($strPol)-1;
for($i=0;$i<$length;$i++){
$str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
}
return $str;
}
相关文章
- 1. metronic 表格插件 datatables
- 2. java使用Jquery表格插件datatables
- 3. DataTables表格插件使用说明
- 4. 插件介绍: DataTables 表格分页
- 5. dataTables 插件学习整理
- 6. jQuery-DataTables插件
- 7. jQuery表格插件datatables用法总结（上）
- 8. jQuery表格插件datatables用法总结（下）
- 9. jQuery表格插件datatables用法总结（中）
- 10. 基于JQuery可拖动列表格插件DataTables的踩坑记
- 更多相关文章...
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Markdown 表格 - Markdown 教程
- • IntelliJ IDEA安装代码格式化插件
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
