Datatables基本初始化——jQuery表格插件



一、概念

1.Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能
datatables默认情况已启用一些功能，搜索、 排序、 分页等功能已经开启

2.怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。 
   

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

3.开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。
4.安装：在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件

<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">

	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#table_id_example').DataTable();
		});
	</script>
<!--第二步：添加如下 HTML 代码-->
<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>

注意：创建table表格的时候必须写<thead>和<tbody>标签，否则datatable样式显示不出来

<!--第三步：初始化Datatables-->
<script type="text/javascript">
		$(document).ready(function() {
			$('#table_id_example').DataTable();
		});
	</script>

5.DataTables布局（dom定位）
datatables默认会打开部分特性，比如搜索框，分页显示等。如果不喜欢默认的布局，则使用DOM选项就可以灵活配置各个特性的设置

datatables定义了10个字符表示不同的组件
•l - Length changing 每页显示多少条数据选项
•f - Filtering input 搜索框
•t - The Table 表格
•i - Information 表格信息
•p - Pagination 分页按钮
•r - pRocessing 加载等待显示信息
•< and > - div elements 一个div元素
•<"#id" and > - div with an id 指定id的div元素
•<"class" and > - div with a class 指定样式名的div元素
•<"#id.class" and > - div with an id and class 指定id和样式的div元素

6.垂直滚动条

如果在一个固定高度的容器里放table，这个时候可能需要用到垂直滚动条，才能展示所有数据。
 开启垂直滚动条很简单，只要设置scrollY和scrollCollapse选项即可

jQuery-UI风格的垂直滚动条

加以下代码，可以滚动查看信息并且显示UI风格：
先引入jQueryUI的样式：

	<!-- 引入jQueryui样式 -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></script>
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css"></script>

$(document).ready(function() {
     $('#example').dataTable( {
         "scrollY": 200,//scrollY=100显示三行数据，=200显示六行数据，此处可随意设置
         "scrollCollapse": true,
         "jQueryUI": true
     } );
 } );

一般设置滚动后就不用加pagination分页按钮了
7.水平滚动条

开启水平滚动条，设置scrollX选项
在这个例子中还加入css样式 th, td { white-space: nowrap; } ，使文字内容在一行里

"scrollX": true,//开启水平滚动条
结合style样式，更明显

<style type="text/css">
	th, td { white-space: nowrap; }
        div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
        }
</style>

8.不同的分页样式
默认情况下Datatables的分页就是上一页、下一页和6个页数按钮，这适合大部分情况。
Datatables提供了四个模式供选择，通过设置 pagingType选项来配置
•simple - 只有上一页、下一页两个按钮"pagingType":   "simple"
•simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个"pagingType":   "simple_numbers"
•full - 有四个按钮首页、上一页、下一页、末页"pagingType":   "full"
•full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮"pagingType":   "full_numbers"

下面例子full_number的例子

$(document).ready(function() {
  $('#example').dataTable( {
    "pagingType":   "full_numbers"
  } );
} );

9.保存状态
Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
 这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项.
需要注意的是，这个特性不支持ie6、ie7
默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格
 这个参数值也可以控制是本地储存(0~更大)还是session储存(-1)
下面的例子展示了Datatables设置 stateSave选项初始化后，实现的状态保存

$(document).ready(function() {
  $('#example').dataTable( {
    "stateSave":true//当页面刷新的时候，会恢复上次的状态
  } );
} );

10.开启/关闭datatables的某些功能
如果不想要datatables的某些功能，可以禁用它

$(document).ready(function() {
  $('#example').dataTable( {
    "paging":   false,//取消分页功能
    "ordering": false,//取消升序降序排列功能
    "info":     false//取消显示行数信息的功能Showing 1 to 10 of 57 entries
  } );
} );

11.复杂表头（rowspan和colspan）
制定复杂的表头(合并列/合并行)

在使用表格的时候总会遇到要分组列的情况，datatables完全支持合并列/合并行

12.一个页面初始化多个表格
datatables可以初始化多个表格，只需要使用jquery的选择器即可
这些表都是独立（即用户控制一个表上分页不会影响其他表格），但它们共享给定的初始化参数 （例如如果你指定的国际化文件，所有的表将显示你指定的语言)。
此外，API 可以一起操作或者独立操作。

某几个独立的表，将table的class设置为相同

<table id="" class="display" cellspacing="0" width="100%">

然后写JS脚本

$(document).ready(function() {
  $('table.display').dataTable();
} );

13.多列排序

datatables允许同时指定多个列排序，有很多不同的方法来实现：
•用户按住shift，鼠标分别点击第一列，第二列等等，可以实现多列同时排序
•给每列加上columns.orderData选项,即如果指定列排序时，第一列有相同数据，则按照第二列排序
•使用columns.orderData选项给多列排序，比如[ [0,'asc'], [1,'asc'] ]
•使用order()方法实现多列排序

注意，可以使用orderMulti 选项来禁用用户按住shift点击多列排序

$(document).ready(function() {
  $('#example').dataTable( {
 
    columnDefs: [ {
      targets: [ 0 ],
      orderData: [ 0, 1 ]  //如果第一列进行排序，有相同数据则按照第二列顺序排列
    }, {
      targets: [ 1 ],
      orderData: [ 1, 0 ]  //如果第二列进行排序，有相同数据则按照第一列顺序排列
    }, {
      targets: [ 4 ],
      orderData: [ 4, 0 ]  //如果第五列进行排序，有相同数据则按照第一列顺序排列
    } ]
  } );
} );

14.表格宽度自适应
让表格跟着页面大小的变化而变化，表格随着页面的大小变化自动适应

用法：<table>属性中，必须设置width=100%,<table id="example" class="display" cellspacing="0" width="100%">
然后JS代码：

$(document).ready(function() {
  $('#example').dataTable();
} );

15.数字格式化（国际化）==========================================================================好像是不管用，没什么效果
通过language.decimal选项可以配置数字的友好显示，比如1200450，显示为12.004,50

$(document).ready(function() {
  $('#example').dataTable( {
     "language": {
        "decimal":",",
        "thousands":"."
    }
  } );
} );

16.语言国际化
可以使用language选项来国际化Datatables的相关信息

$(document).ready(function() {
         $('#example').dataTable( {
             "language": {
                 "lengthMenu": "每页 _MENU_ 条记录",
                 "zeroRecords": "没有找到记录",
                 "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                 "infoEmpty": "无记录",
                 "infoFiltered": "(从 _MAX_ 条记录过滤)"
             }
         } );
 } );

17.设置隐藏列
不希望显示在屏幕上，或者需要什么条件才会显示，使用columns.visible选项来实现
被隐藏的列依然是表格的一部分，通过column().visible()方法来显示
被隐藏的列既然是表格的一部分，那么也可以搜索和访问被隐藏的列的相关内容

$(document).ready(function() {
  $('#example').DataTable( {
    "columnDefs": [
      {
        "targets": [ 2 ],//目标定位到第三列
        "visible": false,//设置不可见
        "searchable": false//不能被搜索到
      },
      {
        "targets": [ 3 ],//目标定位到第四列
        "visible": false//设置不可见
      }
    ]
  } );
} );

18.默认排序
在datatables初始化时可以使用order选项指定列怎么排序，order可以接受多个二维数组数据，
数组第一个位置为第几列，第二个位置为标示asc升序或desc降序

$(document).ready(function() {
              $('#example').dataTable( {
              //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
                "order": [[ 3, "desc" ]]
              } );
            } );