I am trying to implemented a detail formatter for my table but I am seeing many fields with underscore such:
_id: undefined
_class: undefined
_data: [object Object]
When I press the plus button.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-filter-control="true"
data-show-search-clear-button="true"
data-sortable="true"
classes="table-sm"
data-pagination="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
class="table-responsive"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[5, 25, 50, 100, all]"
data-show-footer="true"
>
<thead>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
<th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
<th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
</tr>
</thead>
<tbody>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td data-field="columnA">a</td>
<td data-field="columnB">2</td>
<td data-field="columnC"> f </td>
</tr>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td>f</td>
<td> 4</td>
<td>d</td>
</tr>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td>f</td>
<td>1</td>
<td>h</td>
</tr>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td>f</td>
<td>1</td>
<td>h</td>
</tr>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td>f</td>
<td>1</td>
<td>h</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>
function detailFormatter(index, row) {
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</body>
</html>
I don't quite understand how this formatted works. I would like to have more control over the fields and not just iterating on the whole objects and print the key values pair. Is this possible?
One way to achieve above is using th data-field value to get only column name from row and then use same to get required value from it. Also , as you have
data-visible="false" in tr for column C so they don't exist in your DOM so its not possible to get its value using $("th:eq(" + (indexs + 1) + ")").data("field") . If you know data-field value for hidden column you can use html.push('<p><b> yourcolumnfieldname :</b> ' + row['yourcolumnfieldname'] + '</p>') .
Demo Code :
function detailFormatter(index, row) {
var html = []
var indexs = 0
$.each(row, function(key, value) {
//index +1 because first column is for `+`
//and data-field is column a ,column b..etc
var columns = $("th:eq(" + (indexs + 1) + ")").data("field")
if (columns != undefined) {
html.push('<p><b>' + columns + ':</b> ' + row[columns] + '</p>')
indexs++;
}
})
//here columnC matches with data-field value.
html.push('<p><b> columnC :</b> ' + row['columnC'] + '</p>')
return html;
}<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>
<body>
<div class="container">
<table id="table" data-toggle="table" data-filter-control="true" data-show-search-clear-button="true" data-sortable="true" classes="table-sm" data-pagination="true" data-show-columns="true" data-show-columns-toggle-all="true" class="table-responsive"
data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true" data-click-to-select="true"
data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[5, 25, 50, 100, all]" data-show-footer="true">
<thead>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
<th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
<th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
</tr>
</thead>
<tbody>
<tr>
<td data-field="columnA">a</td>
<td data-field="columnB">2</td>
<td data-field="columnC"> f </td>
</tr>
<tr>
<td>f</td>
<td>4</td>
<td>d</td>
</tr>
<tr>
<td>f</td>
<td>1</td>
<td>h</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</body>
</html>