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-role=button
给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery
Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery
Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。
样式链接按钮
在一个网页的主要内容块，你可以样式的任何锚链接为按钮添加 data-role="button"
属性。该框架将加强与标记和类的链接方式链接按钮。例如，这个标记：
图标样式列表
jQuery Mobile 自带很多按钮小图标，如下图所示：
左箭头：data-icon="arrow-l"
右箭头：data-icon="arrow-r"
上箭头：data-icon="arrow-u"
下箭头：data-icon="arrow-d"
删除：data-icon="delete"
添加：data-icon="Plus"
减少：data-icon="minus"
检查：data-icon="Check"
齿轮：data-icon="gear"
前进：data-icon="Forward"
后退：data-icon="Back"
网格：data-icon="Grid"
五角：data-icon="Star"
警告：data-icon="Alert"
信息：data-icon="info"
首页：data-icon="home"
默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos
属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本。例如，标记：
隐藏图片上的文字 data-iconpos="notext"
你也可以创建一个图标按钮，设置
data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上，但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如，data-iconpos="right"，data-iconpos="notext"：
使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon-
，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“
myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。
然后你可以在你的样式表写一个CSS规则来定义
ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。
这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone
4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）