JQuery DataTable 响应行为不适用于 table inside Bootstrap 4 accordion
JQuery DataTable responsive behavior not working for table inside Bootstrap 4 accordion
我有一个 Bootstrap 4 手风琴，每个部分都有一个 table。 table 具有 JQuery DataTables 扩展名，并设置为响应式。在我将 tables 放入手风琴之前，tables 表现得很好（即图标出现在 expand/collapse 行，table 随 window 调整大小） .但是在将它们移动到手风琴内部之后，tables 溢出并且 运行 离开屏幕而不是响应。我已经尝试了迄今为止找到的所有解决方案，但似乎没有任何效果。任何帮助将不胜感激。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css" type="text/css" rel="stylesheet" />
<style>
body {
padding-top: 0px;
padding-bottom: 20px;
}
/*For centered headings*/
.heading-center {
margin-top: 3vh;
text-align: center;
font-weight: bold;
}
/*Change color of focused elements' border*/
.form-control:focus {
border-color: #ffcc24 !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 204, 36, 0.8) !important;
outline: 0 none !important;
}
.form-control {
border: none !important;
}
/*Override extra link decorations on navbar and home quick actions*/
nav > ul > li > a:hover {
text-decoration-line: none;
}
nav > ul > li > ul > li > a:hover {
text-decoration-line: none;
}
.quick-actions a:hover {
text-decoration-line: none;
}
/*Change background color of hovered table row*/
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #ffcc24;
cursor: pointer;
}
.table-text-center > tbody > tr > td,
.table-text-center > thead > tr > th {
text-align: center;
}
/*Override boostrap class attributes.*/
.table .table-title th{
background-color: black;
}
.table .table-title h1 {
color: white;
}
.table .table-col-titles th{
background-color: black;
color: white;
}
/*.table {
border-collapse: separate;
}*/
/*Sticky table header*/
.sticky-title th{
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.sticky-col-titles th {
position: -webkit-sticky;
position: sticky;
top: 150px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/*Padding the nav bar*/
.padded-nav {
padding: 10px;
}
main {
margin-top: 40px;
width: 100%;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid black;
margin: 1em 0;
padding: 0;
}
.table {
width: 100% !important;
}
thead {
color: white;
background-color: black;
}
.descr-table {
width: 80%;
margin-left: auto;
margin-right: auto;
min-width: 250px;
}
.descr-table th {
width: 30%;
background-color: #ffcc24;
border: 1px solid black;
}
.descr-table td {
width: 70%;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<main class="container-fluid">
<h1 class="text-center">CUSTOMER DETAILS</h1>
<table class="descr-table">
<tr>
<th>Customer ID</th>
<td>98789098</td>
</tr>
<tr>
<th>Customer Name</th>
<td>Business, LLC</td>
</tr>
</table>
<hr />
<div class="accordion" id="customerDetailsAccordion">
<div id="poTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#poTableWrapper" aria-expanded="false" aria-controls="poTableWrapper">
<h2 class="text-center">PURCHASE ORDERS</h2>
</div>
<div id="poTableWrapper" class="collapse container-fluid" aria-labelledby="poTableHeader" data-parent="#customerDetailsAccordion">
<table id="poTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div id="userTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#userTableWrapper" aria-expanded="false" aria-controls="userTableWrapper">
<h2 class="text-center">USERS</h2>
</div>
<div id="userTableWrapper" class="collapse" aria-labelledby="userTableHeader" data-parent="#customerDetailsAccordion">
<table id="usersTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
</tbody>
</table>
</div>
<hr />
</div>
</main>
<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 defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script defer src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script defer>
$("document").ready(function () {
$("#poTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "PO #"
},
{
title: "Service Type"
},
{
title: "Currency"
},
{
title: "Issue Date"
},
{
title: "Expiration Date"
},
{
title: "Total Amount"
},
{
title: "Threshold Amount"
},
{
title: "Remaining Amount"
}
]
});
$("#usersTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "Name"
},
{
title: "Username"
},
{
title: "Email"
}
]
});
//Redirect to po details page except when expand/collapse icon clicked.
$('#poTable td').click(function () {
if ($(this).attr('class') !== 'sorting_1')
{
location.href = '#';
}
});
});
</script>
</body>
</html>
哦，那很有趣！在一个无聊的星期天下午做的事情真是太棒了！
无论如何，当某些东西不可见时，你无法做出响应。 DataTables 始终存在不可见表的问题 - 让我陷入困境的是弄清楚如何收听显示的事件 - 我尝试了本机 Bootstrap 机制，但没有任何乐趣（不过我会尝试更多).与此同时，这种方法 - 使用几个 MutationObservers - 似乎很有效：
const poNode = document.getElementById('poTableWrapper');
const usersNode = document.getElementById('usersTable');
const config = {
attributes: true
};
const poCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#poTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const usersCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#usersTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const poObserver = new MutationObserver(poCallback);
const usersObserver = new MutationObserver(usersCallback);
poObserver.observe(poNode, config);
usersObserver.observe(usersNode, config);
在这里工作 repl：https://repl.it/@annoyingmouse/DearestCelebratedMultithreading#script.js（如果有用，现在复制代码，我不确定它能在那里持续多久）
我有一个 Bootstrap 4 手风琴，每个部分都有一个 table。 table 具有 JQuery DataTables 扩展名，并设置为响应式。在我将 tables 放入手风琴之前，tables 表现得很好（即图标出现在 expand/collapse 行，table 随 window 调整大小） .但是在将它们移动到手风琴内部之后，tables 溢出并且 运行 离开屏幕而不是响应。我已经尝试了迄今为止找到的所有解决方案，但似乎没有任何效果。任何帮助将不胜感激。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css" type="text/css" rel="stylesheet" />
<style>
body {
padding-top: 0px;
padding-bottom: 20px;
}
/*For centered headings*/
.heading-center {
margin-top: 3vh;
text-align: center;
font-weight: bold;
}
/*Change color of focused elements' border*/
.form-control:focus {
border-color: #ffcc24 !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 204, 36, 0.8) !important;
outline: 0 none !important;
}
.form-control {
border: none !important;
}
/*Override extra link decorations on navbar and home quick actions*/
nav > ul > li > a:hover {
text-decoration-line: none;
}
nav > ul > li > ul > li > a:hover {
text-decoration-line: none;
}
.quick-actions a:hover {
text-decoration-line: none;
}
/*Change background color of hovered table row*/
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #ffcc24;
cursor: pointer;
}
.table-text-center > tbody > tr > td,
.table-text-center > thead > tr > th {
text-align: center;
}
/*Override boostrap class attributes.*/
.table .table-title th{
background-color: black;
}
.table .table-title h1 {
color: white;
}
.table .table-col-titles th{
background-color: black;
color: white;
}
/*.table {
border-collapse: separate;
}*/
/*Sticky table header*/
.sticky-title th{
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.sticky-col-titles th {
position: -webkit-sticky;
position: sticky;
top: 150px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/*Padding the nav bar*/
.padded-nav {
padding: 10px;
}
main {
margin-top: 40px;
width: 100%;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid black;
margin: 1em 0;
padding: 0;
}
.table {
width: 100% !important;
}
thead {
color: white;
background-color: black;
}
.descr-table {
width: 80%;
margin-left: auto;
margin-right: auto;
min-width: 250px;
}
.descr-table th {
width: 30%;
background-color: #ffcc24;
border: 1px solid black;
}
.descr-table td {
width: 70%;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<main class="container-fluid">
<h1 class="text-center">CUSTOMER DETAILS</h1>
<table class="descr-table">
<tr>
<th>Customer ID</th>
<td>98789098</td>
</tr>
<tr>
<th>Customer Name</th>
<td>Business, LLC</td>
</tr>
</table>
<hr />
<div class="accordion" id="customerDetailsAccordion">
<div id="poTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#poTableWrapper" aria-expanded="false" aria-controls="poTableWrapper">
<h2 class="text-center">PURCHASE ORDERS</h2>
</div>
<div id="poTableWrapper" class="collapse container-fluid" aria-labelledby="poTableHeader" data-parent="#customerDetailsAccordion">
<table id="poTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>00.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div id="userTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#userTableWrapper" aria-expanded="false" aria-controls="userTableWrapper">
<h2 class="text-center">USERS</h2>
</div>
<div id="userTableWrapper" class="collapse" aria-labelledby="userTableHeader" data-parent="#customerDetailsAccordion">
<table id="usersTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
</tbody>
</table>
</div>
<hr />
</div>
</main>
<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 defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script defer src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script defer>
$("document").ready(function () {
$("#poTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "PO #"
},
{
title: "Service Type"
},
{
title: "Currency"
},
{
title: "Issue Date"
},
{
title: "Expiration Date"
},
{
title: "Total Amount"
},
{
title: "Threshold Amount"
},
{
title: "Remaining Amount"
}
]
});
$("#usersTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "Name"
},
{
title: "Username"
},
{
title: "Email"
}
]
});
//Redirect to po details page except when expand/collapse icon clicked.
$('#poTable td').click(function () {
if ($(this).attr('class') !== 'sorting_1')
{
location.href = '#';
}
});
});
</script>
</body>
</html>
哦，那很有趣！在一个无聊的星期天下午做的事情真是太棒了！
无论如何，当某些东西不可见时，你无法做出响应。 DataTables 始终存在不可见表的问题 - 让我陷入困境的是弄清楚如何收听显示的事件 - 我尝试了本机 Bootstrap 机制，但没有任何乐趣（不过我会尝试更多).与此同时，这种方法 - 使用几个 MutationObservers - 似乎很有效：
const poNode = document.getElementById('poTableWrapper');
const usersNode = document.getElementById('usersTable');
const config = {
attributes: true
};
const poCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#poTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const usersCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#usersTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const poObserver = new MutationObserver(poCallback);
const usersObserver = new MutationObserver(usersCallback);
poObserver.observe(poNode, config);
usersObserver.observe(usersNode, config);
在这里工作 repl：https://repl.it/@annoyingmouse/DearestCelebratedMultithreading#script.js（如果有用，现在复制代码，我不确定它能在那里持续多久）