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
官网有例子在API，addrow那个例子里
<button id="addRow">Add new row</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
</table>
//引入其他js
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
'<input type="button" value="button"/>',
'<a href="xxx">超链接</a>',
counter +'.4',
counter +'.5'
] ).draw();
counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );
</script>
add里面的分号内容 随便你插入什么格式的东西只要标签对就可以
