DataTabls使用案例

最近项目中绘制表格大量用到了DataTabls绘制表格，感觉特别好用。有几个很常见的方法记录一下。

1、render()：

（1）作用：把请求过来的数据做进一步的处理， 方法返回的数据被用作Datatables最终使用的数据。

（2）参数：render( data, type, row, meta )
data：当前cell的值；
type：数据类型 - 有这些值：filter、display、type、sort
row：整个row的数据

（3）应用：
把数据源的数据转换成超链接：

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

2、createdcell

（1）单元格创建回调以允许操作DOM：从ajax数据源或dom数据源读取数据创建单元格执行的回调函数。补充操作单元格的dom元素。

（2）参数：function createdCell( cell, cellData, rowData, rowIndex, colIndex )

（3）应用：（在单元格前边添加按钮）

$("#example").dataTable({
	"columns": [
		{"data": "work",
		"createdCell": function(td, cellDate, rowData, row, col){
				$(td).prepand('<button type="button">前加</button>');  // 在单元格前添加按钮
				$(td).append('<button type="button">后加</button>');  // 在单元格后添加按钮
				$(td).css({"position": "relative"});  // 定位
			}
		}
	]
})

3、columns和columnDefs

（1）columns：设置列的初始化属性。使用 columns来定义列，那么你的th有多少，就要定义多个个（如果你不指定任何选项可以为null）

禁止第一列参与过滤(此表格有5列，其他列由于不指定选项，则为null) 
$('#example').dataTable( {
  "columns": [
    { "searchable": false },
    null,
    null,
    null,
    null
  ]
} );

（2）columnDefs：设置列定义初始化属性
和 columnsOption 参数很像，这个参数允许你给指定列设置选项，应用到一个或这多个列。而不像 columnsOption 需要每列都要定义

这个参数是一个列定义对象数组，通过使用 columnDefs.targetsDT 选项，告诉Datatables是定义的是那一列，他可以是下列情况：

0或者正整数-列从左到右是从0开始
一个负数-列从右到左的索引(-1代表最后一列)
一个字符串-将字符串和类名匹配列
字符串"_all"-所有列

另外， targets可以同时指定多列，接受一个数组（比如 targets: [ -1, -2 ] ）

// 应用场景一：在鼠标点击每一行时跳转到改行详情页
1、先给每一行添加class属性；
$("#example").dataTable({
	"columnDefs": [
		{
		"targets": "_all",  // 受影响咧
		className: "detail-control',  // 每列增加class属性
		"render": $.fn.dataTable.render.text()  // ？这行是干什么的？请指导的大神指导下
		}
	]
})
2、绑定点击事件
$("#example tbody").on("click", "td.detail-control", function(){
	var data = $("#example").row(this).data();  // 获取选中行的数据
	var data = $("example").row($(this).parents("tr")).data();  同上
	window.location.href="url=" + data.id;
})

// 设置列为编辑或删除图标
"columnDefs": [
    {
        "targets": -1,
        "data": null,
        "defaultContent": '<i class="fa fa-edit" style="font-size: 20px;position: absolate; margin-right: 20%; cursor: pointer" id="edit"></i>&nbsp;<i class="fa fa-times" style="font-size: 20px; cursor: pointer" id="delete"></i>',
        "render": $.fn.dataTable.render.text()
    }

],

4、表格更改后刷新表格（表格重载数据，不刷新页面）

 // 表格再更改之后刷新表格，不刷新页面
$('#mytable').DataTable().ajax.url('/hello_word').load();

// 对加载到的数据进一步处理
$("#example").DataTable().ajax.url(url).load(function (data) {
console.log(data.data.length);
    if (data.data.length == 0) {
        $('#pd1').hide();
    } else {
        $('#pd1').show();
    }
});

5、下拉选择搜索框

<div class="col-md-3">
    <form role="form">
         <div class="form-group">
             <label class="col-md-5  col-sm-5 control-label"
                    style="margin-left: 2%;z-index: 999990;padding: 0px">搜所课程：</label>
             <div class="col-md-7"
                  style="padding-left: 0px;margin-left: -6%;margin-top: -1%;padding-left: 0px;padding-right: 0px;">
                 <select class="form-control " id="course_select">
                     <option value="全部">全部</option>
                     <option value="语文">语文</option>
                     <option value="数学>数学</option>
                     <option value="英语">英语</option>
                 </select>
             </div>
         </div>
     </form>
 </div>

<script type="text/javascript">
$("#course_select").change(function(){
	var url = "/get_sourse?course=" + $("#course_select").val();
	// 重新加载数据
	$("#mytable").DataTable().ajax.url(url).load(function (data) {
        console.log(data.data.length);
         if (data.data.length == 0) {
             $('#pd1').hide();
         } else {
             $('#pd1').show();
         }
     });
})
</script>

6、删除选中行

//删掉选中行，不重新加载数据
table.row($(this).parents('tr')).remove().draw(false);  

更多配置说明和使用案例请参考：
Jquery DataTable基本使用