Datatables

处理模式(Processing modes)

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):

• 客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
• 服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

---

##安装

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件

<!-- 第一步引入-->
<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">

 
<!--第二步：添加如下 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>
 
 
 
<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table_id_example').DataTable();
} );

数据源类型(Data source types)

DataTables 使用的数据源必须是一个数组，数组里的每一项将显示在你定义的行上面，DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源：

• 数组(Arrays [])
• 对象(objects {})
• 实例(new myclass())

DataTables 可以用 columns.dataOption 或者 columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲 columns.render 3不定时一讲 columns.render 4不定时一讲 选项来设定显示数据，默认操作模式是数组（Arrays），而对象（Objects）和实例（Instance）能处理更复杂的数据

####数组(Arrays)
数组在 DataTables 中很容易使用当使用数组作为数据源,每个数组元素的数量必须等于表中的列数

	          	<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
		            <thead>
			            <tr>
							<th>id</th>
							<th>type</th>
							<th>k</th> 
		              </tr>
		            </thead>
	              <tbody>

var data = [['1','1','1'],['2','2','2']];
//DataTables 这样初始化：
$(function () {
	$('#dt-table').DataTable({
	data:data
   });
});

####对象(Objects)
对象看起来很直观，使用起来和数组略有不同。根据表格的需求显示，对象可以包含更多的信息,例如包括数据库的主键而用户是看不见的.
######使用对象前，你需要明确告诉 DataTables 那个属性对应那一列， 通过使用 columns.dataOption 或者 columns.dataOption 选项完成。

	          	<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
		            <thead>
			            <tr>
							<th>id</th>
							<th>name</th>
		              </tr>
		            </thead>
	          	</table>

 var data = [
	{"id" : "1",
	 "name" : "张三",
	 "type" : "1"},
	{"id" : "2",
	 "name" : "李四",
	 "type" : "1"},
]; 
//object可以如下初始化表格
$(function () {
	$('#dt-table').DataTable({
	data:data,
	 //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
     //data 这里是固定不变的，id,name 为你数据里对应的属性
    columns: [
        { data: 'id' },
        { data: 'name' }
    ]
   });
});

####实例(Instances)
DataTables 从实例中获取数据显示是非常有用的，这些实例可以定义成抽象的方法来更新数据。

注意,id 是属性而name是一个方法，DataTables 允许这样使用，他会自动识别，初步判断可做初始化数据使用

<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
	 <thead>
           <tr>
				<th>id</th>
				<th>name</th>
          </tr>
    </thead>
</table>

function pepo(id,name){
	this.id = id;
	this._name = name;
	
	this.name = function(){
		
		//初步预计可初始化参数使用如：
		if(this._name == "王五"){
			this._name = "格式化后的王五";
		}
	}
}

$(function () {
	$('#dt-table').DataTable({
	data:[
		new pepo("1", "王五"),
		new pepo("2", "赵六")
		],
    columns: [
        { data: 'id' },
        { data: 'name()' }
    ]
   });
});

##Data sources
DataTables 支持三种数据源显示：

• DOM
• JavaScript
• Ajax

DOM

DataTables 初始化后，它会自动检查表格中的数据，如果存在即作为表显示的数据 （注意，如果你这时使用data或者ajax传递数据将不会显示），这是使用 DataTables 最简单的方法，渲染已经存在的table

注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源(见上)。

DataTables还可以直接把 DOM 数据转化为自己的内部数据对象，，示例如下：

            <button id="btn1" >获取选中的行</button>
         	<table id="dt-table" class="table table-striped table-bordered table-hover " style="width:100%">
	            <thead id = "bod">
		            <tr>
						<th>id</th>
						<th>name</th>
	              </tr>
	            </thead>
	            <tbody>
	            	 <tr>
						<td>1</th>
						<td>张三</th>
	              	</tr>
	              	 <tr>
						<td>2</th>
						<td>李四</th>
	              	</tr>
	            </tbody>
         	</table>

#####点击与选中事件

$(function () {
	var table = $('#dt-table').DataTable({
		//这样配置后，即可用DT的API来访问表格数据
    columns: [
        { data: 'id' },
        { data: 'name' }
    ]
   });
	
    //给行绑定选中事件
    $('#dt-table tbody').on( 'click', 'tr', function () {
    	console.log($(this).hasClass('selected'));
       if ($(this).hasClass('selected')) {
           $(this).removeClass('selected');
       }
       else {
           table.$('tr.selected').removeClass('selected');
           $(this).addClass('selected');
       }
   } );
   //给按钮绑定点击事件
   $("#btn1").click(function () {
       var column1 = table.row('.selected').data().id;
       var column2 = table.row('.selected').data().name;
       alert("第一列内容："+column1 + "；第二列内容： " + column2);
   });
	
}); 

#####HTML5
DataTables 中还可以利用HTML5 data- *属性,可以提供datatables中排序和搜索数据的附加信息。例如您可能有一个列是一个日期格式,如“21st November 2013”，浏览器将难以排序,但是你可以提供一个data-order属性作为HTML的一部分包含一个时间戳,就可以很容易地解决。此外,可以使用data-search搜索数据。例如:

<td data-search="21st November 2013 21/11/2013" data-order="1384992000">
    21st November 2013
</td>

DataTables 中会自动检测:

排序数据: data-order 和 data-sort 属性
查找数据: data-search 和 data-filter 属性

####Javascript
你可以指定 DataTables 使用哪一种数据作为初始化，这些数据可以是数组，对象或者实例(见上)，只要 JavaScript 可以访问到数据就可以交给 DataTables 显示。

查看 DataTables 的api，使用row.add()和row.remove()方法可以动态添加删除表格中的数据

####Ajax
ajax和javascript数据很类似，你只需要指定要加载的数据的url即可。

服务器端处理是一种特殊的数据源，每页的数据通过异步请求来显示相应的数据，这允许大量的数据集显示，怎么实现服务器处理，详细参考手册

http://datatables.net/manual/data
http://www.datatables.club/manual/data.html