在我的網站中，我在我的專案中使用 bootstrap v5.1 和 datatable v1.10。但是這個資料表版本會影響引導下拉選單。下拉選單未打開。也沒有錯誤拋出，當我洗掉最新版本并添加舊版本的資料表時，它作業正常。如果有人對此問題有解決方案，請幫助我。
這里我添加了我的 UI html 代碼，請找到下拉初始化。這是一個示例引導導航欄。
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="homeHeader">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="padding: 0;">
<img src="images/logo-text.png" style="height: 36px;">
<!-- <div style="display: inline-block;font-weight: 600;color: #ffffff;">Ledger Book</div>-->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown" id="profileDropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<div style="font-size: 14px;font-weight: 600;display: inline-block;vertical-align: top;" id="fullName"></div>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="javascript:void(0);"><i class="fa fa-user"></i> My Profile</a></li>
<li><a class="dropdown-item" href="javascript:void(0);"><i class="fa fa-cog"></i> Settings</a></li>
<li><a class="dropdown-item" href="javascript:void(0);"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
這里我提到了我用函式初始化資料表。但是以前版本的下拉選單運行良好。當我將 v1.10 與 bootstrap 5.1 一起使用時，下拉選單無法正常作業。
function getExpenseList() {
const fields = [
{
mData: 'expense_ts',
sTitle: 'Paid Time',
"orderable": true,
bSortable : true,
mRender: function (data, type, row) {
return '<div>' row["paid_date"] ' ' row["paid_time"] '</div>';
}
},
{
mData: 'amount',
sTitle: 'Amount',
mRender: function (data, type, row) {
return '<div style="text-align: right;"><i class="fa fa-inr" style="color: #666666;"></i> ' Number(data).toFixed(2) '</div>';
}
},
{
mData: 'expense_details',
sTitle: 'Expense Details',
bSortable : false,
"orderable": false,
mRender: function (data, type, row) {
return data;
}
},
{
mData: 'payment_type',
sTitle: 'Payment Type',
bSortable : false,
"orderable": false,
mRender: function (data, type, row) {
let typeHtml = '<span><i class="fa fa-money"></i> ' data '</span>';
if (data === "Cash") {
typeHtml = '<span><i class="fa fa-money"></i> Cash</span>';
} else if (data === "Online") {
typeHtml = '<span><i class="fa fa-money"></i> Online</span>';
}else{
typeHtml = '<span><i class="fa fa-money"></i> Other</span>';
}
return '<div>' typeHtml '</div>';
}
},
{
mData: 'ledger_name',
sTitle: 'Actions',
bSortable : false,
"orderable": false,
"data": null,
mRender: function (data, type, row) {
return '<div style="text-transform: capitalize;text-align: center;">'
'<button class="btn btn-outline-primary th-action" onclick="editExpense(\'' row["_id"] '\')"><i class="fa fa-pencil"></i></button>'
'<button class="btn btn-outline-primary th-action" onclick="deleteExpense(\'' row["_id"] '\')" style="margin-left: 6px;"><i class="fa fa-trash"></i></button>'
'</div>';
}
}
];
const queryParams = {
"query": {
"bool": {
"must": [],
"should": [],
"filter": {
"range": {
"expense_ts": {
"gte": new Date(startDate).getTime(),
"lte": new Date(endDate).getTime()
}
}
},
}
},
"sort": [{ "expense_ts": { "order": "asc" } }]
}
$.fn.dataTable.ext.buttons.refresh = {
text: 'Refresh'
, action: function ( e, dt, node, config ) {
dt.clear().draw();
dt.ajax.reload();
}
};
setTimeout(function(){
if (expenseTable) {
expenseTable.destroy();
$("#expenseList").html("");
}
expenseTable = $("#expenseList").DataTable({
fixedHeader: true,
responsive: true,
select: true,
paging: true,
searching: true,
dom: 'Bfrtip',
lengthMenu: [
[5, 10, 50, 100],
[5, 10, 50, 100]
],
buttons: [
'print',
{
text: 'Refresh',
action: function ( e, dt, node, config ) {
getExpenseList();
}
}
],
aaSorting: [
[0, 'desc']
],
aoColumns : fields,
bServerSide : true,
sAjaxSource : API_BASE_PATH 'expense/list',
fnServerData : function (sSource, aoData, fnCallback, oSettings) {
let keyName = fields[oSettings.aaSorting[0][0]]
let sortingJson = {};
sortingJson[keyName['mData']] = {
"order": oSettings.aaSorting[0][1]
};
queryParams.sort = [sortingJson];
queryParams.query['bool']['must'] = [];
queryParams.query['bool']['should'] = [];
delete queryParams.query['bool']["minimum_should_match"];
queryParams['size'] = oSettings._iDisplayLength;
queryParams['from'] = oSettings._iDisplayStart;
queryParams.query['bool']['must'].push({
"match": {
"user_id": USER_OBJ["username"]
}
})
skyLoader("show");
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"contentType": 'application/json',
"type": "POST",
"url": sSource,
"data": JSON.stringify(queryParams),
success: function (data) {
skyLoader("hide");
let resultData = {};
if(data["status"]){
let resultData = data.result.data;
resultData['draw'] = oSettings.iDraw;
EXPENSE_LIST = resultData['data'];
fnCallback(resultData);
}
}
});
}
});
}, 400);
}
uj5u.com熱心網友回復：
我得到了解決方案，這是一個資料表問題。對于最新版本，它作業正常。因此，如果您將 v1.10 與 bootstrap5.1 一起使用，只需將其洗掉并使用 v1.11.5。從下面給出的網址。
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/452333.html
標籤：html 推特引导 数据表 引导程序 5 数据表-1.10
上一篇：帶有“粘性”卡片的水平滾動卡片