datatables 获取隐藏列的值
datatables 通过 "visible": false, 属性控制列的隐藏
datatables 如何获取隐藏列的 data 属性值，看如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js" type="text/javascript"></script>
</head>
<body>
<table id="table_id" class="table table-bordered table-hover dataTable">
<thead>
<tr>
<th class="text-center">隐藏id</th>
<th class="text-center">编号</th>
<th class="text-center">作者</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id').DataTable({
language : {
"lengthMenu" : '每页显示<select class="form-control input-xsmall">'
+ '<option value="10">10</option>'
+ '<option value="20">20</option>'
+ '<option value="30">30</option>'
+ '<option value="40">40</option>'
+ '<option value="50">50</option>' + '</select>条',
"paginate" : {
"first" : "首页",
"last" : "尾页",
"previous" : "上一页",
"next" : "下一页"
},
"processing" : "加载中...", //DataTables载入数据时，是否显示‘进度’提示
"emptyTable" : "暂无数据",
"info" : "共 _PAGES_ 页 _TOTAL_ 条数据 ",
"infoEmpty" : "暂无数据",
"emptyTable" : "暂无要处理的数据...", //表格中无数据
"search": "搜索:",
"infoFiltered" : " —— 从 _MAX_ 条数据中筛选",
"zeroRecords": "没有找到记录"
},
serverSide : true,//是否开启服务器模式
ajax : {
url: 'http://localhost:8089/d/getList',
type: 'post',
data : function(d){
var book = {};
book.pageSize = d.length;
book.draw = d.draw;
book.offset = d.start;
return book;
}
},
columns: [
{
"data": "id",
"name" : "id",
"visible": false,
"sDefaultContent":"", //默认空字符串
"sClass": "text-center"
},
{
"orderable" : false,
"data": "author",
'sClass': "text-center"
},
{
"orderable" : false,
"data": "name",
'sClass': "text-center"
},
{
"orderable" : false,
"targets" : 3,//操作按钮目标列
"data" : null,
"sWidth" :"350px",
'sClass': "text-center",
"render" : function(data, type,row,meta) {
var html = "";
html += "<button id='testButton' style='margin-right:10px;' "+
"class='delete btn btn-success' ><i class='fa icon-key'></i> 获取隐藏id</button>"
return html;
}
}
]
});
});
//获取隐藏列的值的方法
$("#table_id tbody").on("click", "#testButton", function () {
//获取行
var row = $("table#table_id tr").index($(this).closest("tr"));
var id = $('#table_id').DataTable().row(row-1).data().id;
alert(id)
});
</script>
</body>
</html>
数据库数据如下
运行效果