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
{data: "id"},{data: "name"},
{data: "ip"},
{data: "description"},
{data: null}
],
columnDefs:[{
targets: 4,
render: function (data, type, row, meta) {
return '<a type="button" class="btn btn-danger btn-block" href="#" onclick=delFromID(' + row.id + ') >删除</a>'
}
},
{ "orderable": false, "targets": 4 },
],
language:{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共告唤 _TOTAL_ 项",
"sInfoEmpty"袜侍凯:"显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"谈尘sSearch": "搜索:",
参考 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条）