#jquery #bootstrap-4 #datatables
#jquery #bootstrap-4 #таблицы данных
Вопрос:
Я пытаюсь получить значение первого столбца выбранной строки, используя таблицы данных. Я прочитал много сообщений и решений для этого. Это должно быть просто, но всякий раз, когда я использую метод «…. data ()», я получаю ошибку «…. не определено».
Первый столбец содержит ключ, который я буду использовать для получения подробной записи и отображения на соседней вкладке. Однако я перепробовал много вещей и, похоже, просто не могу получить значение.
Таблица заполняется данными, возвращаемыми вызовом 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', className: 'btn' },
{ extend: 'excel', className: 'btn' },
{ 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"];