In my website i'm using bootstrap v5.1 and datatable v1.10 in my project. But this datatable version affect the bootstrap dropdown. The dropdown is not opening. Also no errors throwing, when i remove the latest version and adding the old version of the datatable it's working fine. If anyone having solution for this problem please help me.
Here I added my UI html code, please find the dropdown initialization. It's a sample bootstrap nav bar.
<nav id="homeHeader">
<div >
<a 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 type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li id="profileDropdown">
<a 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 aria-labelledby="navbarDropdown">
<li><a href="javascript:void(0);"><i ></i> My Profile</a></li>
<li><a href="javascript:void(0);"><i ></i> Settings</a></li>
<li><a href="javascript:void(0);"><i ></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here I mentioned my data table initialization with a function. But the previous version of the dropdown is working fine. When I using the v1.10 with bootstrap 5.1 that dropdown not working properly.
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 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 ></i> ' data '</span>';
if (data === "Cash") {
typeHtml = '<span><i ></i> Cash</span>';
} else if (data === "Online") {
typeHtml = '<span><i ></i> Online</span>';
}else{
typeHtml = '<span><i ></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 onclick="editExpense(\'' row["_id"] '\')"><i ></i></button>'
'<button onclick="deleteExpense(\'' row["_id"] '\')" style="margin-left: 6px;"><i ></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);
}
CodePudding user response：
I got the solution, It's a datatable problem. For the latest version it's working fine. So if you are using the v1.10 with bootstrap5.1 just remove it and use the v1.11.5. from below given 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