jquery.datatable 初始化时可以在column或者columnDefs中定义render方法, 可以返回自定义的表格单元结构
举个栗子(javascript初始化的数据源):
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="sleest">
<meta name="description" content="datatable example with column render, 2017/08/04">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.15/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display" width="100%"></table>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<script>
+(function($) {
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh"],
["Garrett Winters", "Accountant", "Tokyo"],
["Ashton Cox", "Junior Technical Author", "San Francisco"],
["Cedric Kelly", "Senior Javascript Developer", "London"]
]
$(function() {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Name", sortable: false, render: function(data, type, row) { return '<a href="###">' + data + '</a>' } },
{ title: "Position", sortable: false },
{ title: "Office", sortable: false },
]
})
})
})(jQuery)
</script>
</body>
</html>
结果:
具体可以参考官方api:
https://datatables.net/examples/advanced_init/column_render.html
更新表中的数据DataRow类为了在编辑数据时挂起和恢复数据行的状态提供了3个方法：BeginEdit、EndEdit和CancelEdit方法。当编辑数据时，调用BeginEdit可以挂起任何事件（或异常），使用Items集合指定要修改的数据的列名和新值；使用EndEdit重新恢复任何事件（或异常）；使用CancelEdit则可以回滚任何更改和重新激活任何事件或异常。
1. //获取Employees表中的第4行数据
2. DataRow drEmployee = dtEmployees.Rows[3]
3.
4. drEmployee.BeginEdit()
5.
6. drEmployee("EmpName") = "John"
7. drEmployee("Title")="Sales"
8. drEmployee.EndEdit()
参考 http://www.datatables.club/reference/option/dom.html
默认dom的取值为 lrtip ，可以为dom添加其他元素， 或修改位置， 如上实例。
Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，即使搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。 这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，我想加入自己的控件放在l的后面……这些太多了，那么下面就给大家介绍怎么去使用dom属性配置已经自定义。
上面我已经用了一些英文字母标注在每个控件的后面，开始看肯定会有些疑惑，或者不熟悉，不要着急，我来告诉大家这些到底是什么
作者为了适应我们所说的这些情况，已经考虑到了，所以有这么强大的dom属性。那么作者定义了如下字母：
这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。
下面还有两个字母是应用到jQueryUI上的，不过作者推荐在1.10甚至1.11版本中不去使用他，通过使用 jQueryUIOption 来分离开
最后，你也可以添加插件给Datatables，指定新的字母。比如 TableTools 就是添加了 T 来表示。在dom里指定之后，相应的按钮就添加到表格上了
注意：dom的用法可能还不是很简单，希望在1.11版本的计划中更加优化这个参数的使用，让表格定位更简单
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）