Jquery 数据表版本 1.10 影响 Bootstrap 版本 5.1 下拉组件
Jquery datatable version 1.10 affecting Bootstrap version 5.1 dropdown component
在我的网站中，我在我的项目中使用 bootstrap v5.1 和 datatable v1.10。但是这个数据 table 版本会影响 bootstrap 下拉列表。下拉列表未打开。也没有错误抛出，当我删除最新版本并添加旧版本的数据 table 它工作正常。如果有人解决了这个问题，请帮助我。
这里我添加了我的UIhtml代码，请找到下拉初始化。这是一个示例 bootstrap 导航栏。
<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>
这里我提到了我的数据table用一个函数初始化。但是以前版本的下拉列表工作正常。当我将 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);
}
我得到了解决方案，这是一个数据表问题。对于最新版本，它工作正常。因此，如果您将 v1.10 与 bootstrap5.1 一起使用，只需将其删除并使用 v1.11.5。从下面给出 url.
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
在我的网站中，我在我的项目中使用 bootstrap v5.1 和 datatable v1.10。但是这个数据 table 版本会影响 bootstrap 下拉列表。下拉列表未打开。也没有错误抛出，当我删除最新版本并添加旧版本的数据 table 它工作正常。如果有人解决了这个问题，请帮助我。
这里我添加了我的UIhtml代码，请找到下拉初始化。这是一个示例 bootstrap 导航栏。
<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>
这里我提到了我的数据table用一个函数初始化。但是以前版本的下拉列表工作正常。当我将 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);
}
我得到了解决方案，这是一个数据表问题。对于最新版本，它工作正常。因此，如果您将 v1.10 与 bootstrap5.1 一起使用，只需将其删除并使用 v1.11.5。从下面给出 url.
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js