Javascript Datatables从显示表中获取值(不是由数据选项设置的初始表)
我对处理数据表有点困惑。我创建了一个简化的示例,其中一个对象数组(每行包含一个时间戳)作为数据源,并用它创建了一个4列数据表:Javascript Datatables从显示表中获取值(不是由数据选项设置的初始表),javascript,datatables-1.10,Javascript,Datatables 1.10,我对处理数据表有点困惑。我创建了一个简化的示例,其中一个对象数组(每行包含一个时间戳)作为数据源,并用它创建了一个4列数据表: $('#myTable').DataTable({ "columns": [{ "title": "Date", "data": "createTime", "orderData": 1, "render": function(data,type,row,meta){retu
$('#myTable').DataTable({
"columns": [{
"title": "Date",
"data": "createTime",
"orderData": 1,
"render": function(data,type,row,meta){return moment.unix(data).format(moment.localeData().longDateFormat('LL'));}
},
{
"title": "0_hidden_createTime",
"data": "createTime",
"visible": false,
"searchable": false
},
{
"title": "Button Column",
"className": "dt-right",
"render": function(data,type,row,meta){return '<button onclick="doIt($(this).closest(\'tr\'));return false;">Press Me</button>';}
},
{
"title": "hidden_id",
"visible": false,
"render": function(data,type,row,meta){return new Date().getTime();}
}],
data: [
{
"createTime": 1570032790
},
{
"createTime": 1572711189
},
{
"createTime": 1575303183
},
{
"createTime": 1577981593
},
{
"createTime": 1580660000
},
{
"createTime": 1583165589
},
{
"createTime": 1585843981
}
]
});
但是我找不到任何关于如何检索隐藏值的有用文档。你能帮我打开这个黑盒子吗?对于所有实际在可见表中的值(如获取上述4行和值),我需要一个简单的调用,如.rows().data()
)
谢谢 那么,在目前还没有答案之后,我创建了一个hack来获取我需要的所有值。当然有更好的方法,但在此之前,这是一个有效的解决方案。此函数从datatable中收集屏幕上可见的值。它还将从defaultContent或render fn设置的隐藏列中收集值 请注意,这适用于我们的特定情况(即,我们使用输入数据,如对象数组等),以防您以另一种方式执行此操作,函数可能会中断
/**
* Function returns the value for a specific row and specific column. Unless specified by @forceVisibleValue, the
* function will return the column from input data if existing.
*
* @el: HMTLElement: from within the table, typically a clicked button
* @column: String: The target column name, can be from both sources - initial data or visible table
* @forceVisibleValue: Boolean: Force the method to return the visible column if exists (just incase your input data and output data has the same column name.
*/
getDataFromColumn: function(el,column,forceVisibleValue){
var row = $(el).closest('tr'),
tableId = $(el).closest('table').attr('id'),
table = $('#'+tableId).DataTable(),
row = table.rows(row),
value = row.data()[0][column];
if(!forceVisibleValue && value)
return value;
if(!value || forceVisibleValue){
//maybe one of the hidden columns
var aoCols = row.context[0].aoColumns;
for(var colIdx in aoCols){
if(aoCols[colIdx]['title'] == column){
if(aoCols[colIdx]['sDefaultContent'])
return aoCols[colIdx]['sDefaultContent'];
else if(aoCols[colIdx]['render']){
var data = aoCols[colIdx]['data'] ? row.data()[0][aoCols[colIdx]['data']] : null,
rowIdx = row[0][0],
colIdx = table.context[0].oInit.columns.findIndex(function(obj){return obj.title == column;});
return aoCols[colIdx]['render'].call(this,data,aoCols[colIdx]['sType'],row.data()[0],{settings: row.context[0], row: rowIdx, col: colIdx});
} else
return null;
}
}
}
return null;
}
因此,在目前还没有答案的情况下,我创建了一个黑客程序来获取我需要的所有值。当然有更好的方法,但在此之前,这是一个有效的解决方案。此函数从datatable中收集屏幕上可见的值。它还将从defaultContent或render fn设置的隐藏列中收集值 请注意,这适用于我们的特定情况(即,我们使用输入数据,如对象数组等),以防您以另一种方式执行此操作,函数可能会中断
/**
* Function returns the value for a specific row and specific column. Unless specified by @forceVisibleValue, the
* function will return the column from input data if existing.
*
* @el: HMTLElement: from within the table, typically a clicked button
* @column: String: The target column name, can be from both sources - initial data or visible table
* @forceVisibleValue: Boolean: Force the method to return the visible column if exists (just incase your input data and output data has the same column name.
*/
getDataFromColumn: function(el,column,forceVisibleValue){
var row = $(el).closest('tr'),
tableId = $(el).closest('table').attr('id'),
table = $('#'+tableId).DataTable(),
row = table.rows(row),
value = row.data()[0][column];
if(!forceVisibleValue && value)
return value;
if(!value || forceVisibleValue){
//maybe one of the hidden columns
var aoCols = row.context[0].aoColumns;
for(var colIdx in aoCols){
if(aoCols[colIdx]['title'] == column){
if(aoCols[colIdx]['sDefaultContent'])
return aoCols[colIdx]['sDefaultContent'];
else if(aoCols[colIdx]['render']){
var data = aoCols[colIdx]['data'] ? row.data()[0][aoCols[colIdx]['data']] : null,
rowIdx = row[0][0],
colIdx = table.context[0].oInit.columns.findIndex(function(obj){return obj.title == column;});
return aoCols[colIdx]['render'].call(this,data,aoCols[colIdx]['sType'],row.data()[0],{settings: row.context[0], row: rowIdx, col: colIdx});
} else
return null;
}
}
}
return null;
}