如何解决获取数据表中所选行中第一列的值
我正在尝试使用DataTables获取选择行第一列的值。我已经阅读了很多帖子和解决方案。它应该很简单，但是每当我使用“ .... data（）”方法时，都会出现“ .... is undefined”错误。
第一列包含密钥，我将使用该密钥获取详细记录并显示在相邻的选项卡中。但是，我尝试了很多事情，但似乎无法获得价值。
该表由API调用返回的数据填充，效果很好。 HTML中的结构如下所示：
<table id="Proposal-table" class="table table-hover non-hover"
data-toggle="Proposal-table" style="width:100%">
<thead>
<tr>
<th data-field="ID_PROPOSAL" id="ID">ID</th>
<th data-field="STR_INST_REF">Institution</th>
<th data-field="NME_PROPOSAL">Name</th>
<th data-field="STR_DESC" data-width="900" data-widthunit="px">Description</th>
<th data-field="CNT_TERM">Term</th>
<th data-field="AMT_TOTAL_VALUE">Value</th>
<th data-field="AMT_TOTAL_COST">Cost</th>
<th data-field="CCY_PROPOSAL">CCY.</th>
<th data-field="PCT_INT_RATE_LOW">Rate Low</th>
<th data-field="PCT_INT_RATE_HIGH">Rate High</th>
<th data-field="IND_PROD_TYPE">Type</th>
<th data-field="IND_STATUS">Status</th>
<th data-field="DTE_CREATED">Created</th>
<th data-field="DTM_MAINT">Maint</th>
<!-- <th>Action TBC</th> -->
</tr>
</thead>
</table>
在这里定义，填充表格并使其可单击：
<script>
function buildTable() {
// Define table to display list from API...
var propTable = $('#Proposal-table').DataTable( {
dom: '<"row"<"col-md-12"<"row"<"col-md-6"B><"col-md-6"f> > ><"col-md-12"rt> <"col-md-12"<"row"<"col-md-5"i><"col-md-7"p>>> >',buttons: {
buttons: [
{ extend: 'copy',className: 'btn' },{ extend: 'csv',{ extend: 'excel',{ extend: 'print',className: 'btn' }
]
},"oLanguage": {
"oPaginate": { "sPrevIoUs": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',"sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },"sInfo": "Showing page _PAGE_ of _PAGES_","sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',"sSearchPlaceholder": "Search...","sLengthMenu": "Results : _MENU_",},"stripeClasses": [],"lengthMenu": [7,10,20,50],"pageLength": 7
} );
// Call API to get data...
$.get("http://path to API/v1/proposal/list/",function (data) {
var listObj = data.output;
console.log(listObj);
$(function () {
$('#Proposal-table').bootstrapTable({
data: listObj
});
//console.log(propTable);
});
},"json");
// Make the table clickable...
$('#Proposal-table').on('click','tbody tr',function() {
var trow = $(this).closest('tr');
var id = trow.attr('data-index');
console.log(trow);
var prop = propTable.row(trow);
console.log(prop);
var selectedRow = propTable.row('tr.selected');
var selectedRowData = propTable.row(selectedRow).data();
console.log(selectedRow);
console.log(selectedRowData.value["ID"]);
console.log(selectedRowData.ID_PROPOSAL);
//var colval = prop.cell(0).data();
//var propID = propTable.row('.selected').data()["ID_PROPOSAL"];
//var rowData = propTable.rows( { selected: true } ).data()[0]['ID_PROPOSAL'];
//var rowdata = propTable.row(this).data()[0];
//console.log(rowData);
//var idx = propTable.cell('.selected',0).index();
//console.log(idx);
//console.log(rowdata);
// console.log(aData);
//var idx = propTable.cell('.selected',0).index();
//var prop = propTable.row( idx.row ).data();
//var id2 = propTable.row({ selected: true } ).data()[0]['ID_PROPOSAL'];
//var idx = $.inArray( tr.attr('id'),prop );
//console.log(idx);
//console.log(prop);
//console.log(id2);
// call API
$.get("http://path to API/v1/proposal/list1/"+id.toString()+"/",function (data) {
var dataObj = data.output;
console.log(dataObj);
displayProposal(dataObj);
},"json");
});
}
window.onload = buildTable;
</script>
任何帮助将不胜感激！
经过大量调查，我已经解决了遇到的问题。我更改了几处内容并尝试了另一种方法后，无法确切地确定问题出在哪里。
我使用了一个单独的$ .get来获取我的数据，并使用Bootstraptable方法将其加载到表中。
我决定使用DataTable ajax选项来获取我的数据并以此加载表。另外，我明确定义了列（和数据）作为表启动的一部分。
因此我将其添加到表定义中：
"ajax": {
"url":"http://path to data/proposal/list/","type":"GET","dataSrc": "output"
},columns:[
{ data: "ID_PROPOSAL"},{ data: "STR_INST_REF"},{ data: "NME_PROPOSAL"},{ data: "STR_DESC"},{ data: "CNT_TERM"},{ data: "AMT_TOTAL_VALUE"},{ data: "AMT_TOTAL_COST"},{ data: "CCY_PROPOSAL"},{ data: "CNT_USER_ID"},{ data: "PCT_INT_RATE_LOW"},{ data: "PCT_INT_RATE_HIGH"},{ data: "IND_PROD_TYPE"},{ data: "IND_STATUS"},{ data: "DTE_CREATED"},{ data: "DTM_MAINT"},],select: true,然后我可以使用以下代码成功访问row（）。data（）方法：
//Make table Clickable and process click...
$('#Proposal-table tbody').on('click','tr',function() {
var dta = propTable.row( this ).data();
var id = dta["ID_PROPOSAL"];
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
