jQuery Datatable插件 表格基本初始化
本文介绍jQuery Datatable插件的表格初始化的基本使用，Datatable是目前使用度比较高的前端表格界面插件，可以很方便地创建响应式的表格，容易实现表格的翻页、过滤、排序等功能。
引入文件
<script type="text/javascript" src="./plugin/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript" src="./script/jquery.dataTables-1.10.12.min.js"></script>
<script type="text/javascript" src="datatableController.js"></script>以上脚本文件依次为jQuery脚本文件，dataTable脚本文件和我们自己编码的dataTable初始化脚本。
<link href="./plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="./css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="./css/dataTables.bootstrap.min.css" rel="stylesheet"/>以上为引入的样式文件，第一个为bootstrap框架样式，其中第二和第三个可以二选一，分别为基于jQuery和Bootstrap的datatable样式。
注意：使用基于jQuery的datatable样式，需要在项目根目录下建立文件夹images，其中放入datatable插件中的资源图片（主要显示排序图标）
其中jQuery样式大致为：
bootstrap样式：
html编码
由于本文介绍的编码方式为在脚本中对表格进行初始化，表格的参数和数据均在脚本中定义，html中只有一个div标签用来定位。
<div class="col-md-10 col-md-offset-1" id="testTable_div"></div>其中col-md-10 col-md-offset-1表示bootstrap布局，使用中型屏幕时占页面10列（一共12列），offset表示左外边距偏移一列。
js编码
表格的初始化代码都在js脚本中进行。
提示信息
-首先，定义表格的提示信息，可以做国际化，为了看起来方便这里直接赋值：
var language = {
"processing": "<img src='loading-spinner-grey.gif'/><span> "+"处理中..."+"</span>",
"lengthMenu": "每页 _MENU_ 条结果",
"zeroRecords": "没有匹配结果",
"info": "<span class='seperator'> </span>" + "总共找到 _TOTAL_ 条结果",
"infoFiltered": " (从所有 _MAX_ 条记录中得到)",
"infoEmpty": "共 0 项",
"emptyTable": "表中数据为空",
"paginate": {
"previous": "前页",
"next": "下页",
"first": "第一页 ",
"last": " 尾页"
}
};代码解析：
- processing 为表格初始化过程中显示的等待信息，这里引入了加载圆圈的动态图并设置文本”处理中…“
- lengthMenu 为可选择的表格每页显示多少条结果,”_MENU_“对应选择的下拉菜单
- zeroRecords 为表格搜索过滤结果为空的提示，emptyTable为表空的提示，均显示在表格中
- info、infoFiltered、infoEmpty均显示在表格外，为表格数据信息
- paginate 为表格翻页选项，previous、next、first、last对应不同的导航标签
表头初始化
然后，是对表头的初始化，其中表头的字段和参数对应之后填充到表格的数据和属性：
var column=[
{"data": "id", name:"ID", "orderable":true},
{"data": "name", name:"Name" , "orderable":false },
{"data": "gender", name:"Gender" , "orderable":false },
{"data": "age", name:"Age" , "orderable":false },
];
var divId='testTable_div';
var tableId='testTable';
var tableEleStr = '<table class="table table-striped table-bordered table-hover" id='+tableId+'>'
+ '<thead>'
+'<tr role="row" class="heading" >'
+ '</tr>'
+ '</thead>'
+'<tbody>'
+'</tbody>'
+'</table>';
$('#'+ divId).append(tableEleStr);
var trEle = $('#'+ tableId + ' > thead >tr');
for ( var one in column){
var th = '<th>' + column[one].name + '</th>';
trEle.append(th);
}代码解析：
- 其中column中，data为表头对应每一列的字段，name为表头显示的名称，orderable表示此列是否可排序
- 之后的代码为使用选择器定位到html中的div标签$(‘#’+ divId)，在其中添加表格子元素，并根据column初始化表头
datatable表格初始化
以下为对jQuery插件datatable的调用，初始化表格：
var table = $("#" + tableId).DataTable({
"dom": '<"top"frt><"bottom"lip>',
"language": language, //language
"paginate": true, // page button
"searching": true, // search bar
"autoWidth":true, //automatically set the column width
"lengthChange": true, // record number in each row
"displayLength": 5, // row number in each page
"lengthMenu":[[5,10,20,-1],[5,10,20,"All"]],
"ordering":true , // sort
"info": true, // Showing info
"scrollY": 300,
"scrollCollapse": true,
"pagingType": "full", // page style
"processing": true,
"serverSide": false,
"destroy": true,
"ajaxSource": "json.txt",
"columns": column,
"columnDefs": [
{
defaultContent: '',
targets: [ '_all' ]
}
],
/*"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"type": 'get',
"url": sSource,
"dataType": "JSON",
"success": function (resp) {
oSettings.iDraw = oSettings.iDraw + 1;
resp = resp.data || [];
var data = {};
data.aaData = resp;
var totalCounts = resp.length;
data.iTotalRecords = totalCounts;
data.iTotalDisplayRecords = totalCounts;
data.sEcho = oSettings;
fnCallback(data);
},
"error": function(resp) {
var data = {};
data.aaData = [];
var totalCounts = 0;
data.iTotalRecords = totalCounts;
data.iTotalDisplayRecords = totalCounts;
data.sEcho = oSettings;
fnCallback(data);
}
});
}*/
});代码解析：
- $(“#” + tableId).DataTable(); 为datatable初始化函数，选择器定位到表格调用
- DataTable()函数中可设置不同的参数（不设置则使用默认值）
- dom 参数设置表格控件的显示，
l - length changing input control
f - filtering input
t - The table
i - Table information summary
p - pagination control
r - processing display element
这里’<”top”frt><”bottom”lip>’表示，在表格上方显示处理提示控件和搜索过滤控件，表格下方显示翻页、数据结果信息和选择显示数据个数控件 - language 即用之前定义的language变量赋值
- paginate、searching、autoWidth、lengthChange、ordering、info、processing分别设置boolean表示是否实现翻页、过滤、自动响应列宽度、每页显示数据个数选择、排序、提示信息和处理等待控件
- “displayLength”: 5 表示每页显示数据个数
“lengthMenu”:[[5,10,20,-1],[5,10,20,”All”]] 表示下拉控件选择的条目，”All“对应-1即全部显示 - “scrollY”: 300,
“scrollCollapse”: true, 两个参数配合使用，表示给定表格固定的高度，在显示数据超过该高度时添加滚动条 - “pagingType”: “full” 表示翻页控件的格式，另外的格式为numbers、simple、simple_numbers、full_numbers
“serverSide”: false, 表示过滤等功能不在服务端处理，在客户端处理（当表格中数据量特别大时，设置为true在服务端处理比较合适）
“destroy”: true, 表示初始化表格时，把选择器对应已有的表格替换掉“ajaxSource”: “json.txt”, 为读取表格数据的ajax数据源，这里为文本文件
“columns”: column, 设置为之前定义的column变量
“columnDefs”: [
{defaultContent: '', targets: [ '_all' ] } ],columnDefs用来设置列的特定属性，这里表示当传入数据为null或undefined时单元格默认显示空（避免提示错误警告），target为所有列
以上已经实现了表格的初始化，注释的 fnServerData 为对服务端获取数据的处理函数，不自定义的情况下有默认的实现，这里主要在出现error时将表格置空而不是提示错误
注意事项及遇到的问题
以上对datatable使用的说明，特别是参数的意义可以参阅：
https://datatables.net/reference/index
遇到的问题
也遇到一些不容易查到的问题，给出自己的解决方案：
- 在 “ajaxSource”: “json.txt” 获取文本文件，直接用浏览器打开网页，会出现xmlhttpRequestError，解决办法为将项目和文本文件都放入tomcat服务端并启动服务，通过服务端获取数据，或者自己启一个服务亦可
- json格式问题：ajaxSource会将json格式文本解析为json对象，文本要符合json格式这里json.txt为
{"data":[{"id":"1","name":"A","gender":"male","age":"25"},{"id":"2","name":"B","gender":"male","age":"25"},{"id":"3","name":"C","gender":"male","age":"25"},{"id":"4","name":"D","gender":"male","age":"25"},{"id":"5","name":"E","gender":"male","age":"25"},{"id":"6","name":"F","gender":"male","age":"25"},{"id":"7","name":"G","gender":"male","age":"25"},{"id":"8","name":"H","gender":"male","age":"25"},{"id":"9","name":"I","gender":"male","age":"25"},{"id":"10","name":"J","gender":"male","age":"25"},{"id":"11","name":"K","gender":"male","age":"25"}]}
- 且json字段需与columns选项定义的列”data“字段对应（即表头），才能正确填充数据到表格，当json无法匹配时会提示错误，设置columnDefs解决
总结
在使用datatable过程中发现，datatable实现方式比较简单而且比较容易扩展，但也会遇到很多问题查阅API也无法解决，还有1.10版本之后很多参数和方法有了很大不同容易混淆。本文简单介绍datatable表格基本初始化，之后再介绍更加实用的进阶例子。
2759
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
