I'm attempting to display the detailView feature using the bootstrap-table library through a JavaScript script, but I'm having difficulty understanding why it's not functioning as expected. I've provided a simplified example below for reference. Despite the data and table being presented correctly, the detailView feature isn't operating properly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<title>Dummy</title>
</head>
<body>
<!-- Table -->
<table id="table"></table>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script>
function renderTable(data, tableId) {
const $table = $(`#${tableId}`);
// Initialize the table
const options = {
columns: [{
field: "id",
title: "ID",
},
{
field: "name",
title: "Name",
},
],
data: data,
detailView: true,
detailFormatter: function(index, row) {
return `<p>Details for ${row.name}</p>`;
},
};
$table.bootstrapTable(options);
}
const data = [{
id: 1,
name: "Item 1",
},
{
id: 2,
name: "Item 2",
},
];
renderTable(data, "table");
</script>
</body>
</html>