'Jquery datatable version 1.10 affecting Bootstrap version 5.1 dropdown component
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 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>
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 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);
}
Solution 1:[1]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Saravanan S |