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
参考 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版本的计划中更加优化这个参数的使用，让表格定位更简单
在当前页的开始和最后，分别点插入——分隔符——分节符类型——下一页。如果中间出现空白页，用回退键连在一起就是汪备了。然后，在当前页的页码处，首先在页眉页脚编辑栏中将“同前”（晌明“同上一节相同”）按钮的勾选状态取消（这一点很重要，一定要先进行！），然后删除当前页页码。接下来，在下一页的页脚处双击，调出页眉页脚编辑栏。还是先将“同前”按钮取消掉，再点左数第三个按钮“设置页码格式”，在d出的对话框中下面的起始页码处写入合适的页码宴陵告，然后点编辑栏左数第一个键“插入页码”，确定.欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）