title: Jquery datatable version 1.10 affecting Bootstrap version 5.1 dropdown component
body: <p>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.</p>
  <p>Here I added my UI html code, please find the dropdown initialization. It's a sample bootstrap nav bar.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot; id=&quot;homeHeader&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot; style=&quot;padding: 0;&quot;&gt;
              &lt;img src=&quot;images/logo-text.png&quot; style=&quot;height: 36px;&quot;&gt;
  &lt;!--            &lt;div style=&quot;display: inline-block;font-weight: 600;color: #ffffff;&quot;&gt;Ledger Book&lt;/div&gt;--&gt;
          &lt;/a&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
              &lt;ul class=&quot;navbar-nav ms-auto&quot;&gt;
                  &lt;li class=&quot;nav-item dropdown&quot; id=&quot;profileDropdown&quot;&gt;
                      &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
                          &lt;div style=&quot;font-size: 14px;font-weight: 600;display: inline-block;vertical-align: top;&quot; id=&quot;fullName&quot;&gt;&lt;/div&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; My Profile&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt; Settings&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-sign-out&quot;&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>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.</p>
  <pre><code>function getExpenseList() {
          
              const fields = [
                  {
                      mData: 'expense_ts',
                      sTitle: 'Paid Time',
                      &quot;orderable&quot;: true,
                      bSortable : true,
                      mRender: function (data, type, row) {
                          return '&lt;div&gt;' + row[&quot;paid_date&quot;] + ' ' + row[&quot;paid_time&quot;] + '&lt;/div&gt;';
                      }
                  },
                  {
                      mData: 'amount',
                      sTitle: 'Amount',
                      mRender: function (data, type, row) {
                          return '&lt;div style=&quot;text-align: right;&quot;&gt;&lt;i class=&quot;fa fa-inr&quot; style=&quot;color: #666666;&quot;&gt;&lt;/i&gt; ' + Number(data).toFixed(2) + '&lt;/div&gt;';
                      }
                  },
                  {
                      mData: 'expense_details',
                      sTitle: 'Expense Details',
                      bSortable : false,
                      &quot;orderable&quot;: false,
                      mRender: function (data, type, row) {
                          return data;
                      }
                  },
                  {
                      mData: 'payment_type',
                      sTitle: 'Payment Type',
                      bSortable : false,
                      &quot;orderable&quot;: false,
                      mRender: function (data, type, row) {
          
                          let typeHtml  = '&lt;span&gt;&lt;i class=&quot;fa fa-money&quot;&gt;&lt;/i&gt; '+data+'&lt;/span&gt;';
                          if (data === &quot;Cash&quot;) {
                              typeHtml = '&lt;span&gt;&lt;i class=&quot;fa fa-money&quot;&gt;&lt;/i&gt; Cash&lt;/span&gt;';
                          } else if (data === &quot;Online&quot;) {
                              typeHtml = '&lt;span&gt;&lt;i class=&quot;fa fa-money&quot;&gt;&lt;/i&gt; Online&lt;/span&gt;';
                          }else{
                              typeHtml = '&lt;span&gt;&lt;i class=&quot;fa fa-money&quot;&gt;&lt;/i&gt; Other&lt;/span&gt;';
                          }
          
                          return '&lt;div&gt;' + typeHtml + '&lt;/div&gt;';
                      }
                  },
                  {
                      mData: 'ledger_name',
                      sTitle: 'Actions',
                      bSortable : false,
                      &quot;orderable&quot;: false,
                      &quot;data&quot;: null,
                      mRender: function (data, type, row) {
                          return '&lt;div style=&quot;text-transform: capitalize;text-align: center;&quot;&gt;' +
                                  '&lt;button class=&quot;btn btn-outline-primary th-action&quot; onclick=&quot;editExpense(\''+row[&quot;_id&quot;]+'\')&quot;&gt;&lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt;&lt;/button&gt;' +
                                  '&lt;button class=&quot;btn btn-outline-primary th-action&quot; onclick=&quot;deleteExpense(\''+row[&quot;_id&quot;]+'\')&quot; style=&quot;margin-left: 6px;&quot;&gt;&lt;i class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;' +
                              '&lt;/div&gt;';
                      }
                  }
              ];
          
              const queryParams = {
                  &quot;query&quot;: {
                      &quot;bool&quot;: {
                          &quot;must&quot;: [],
                          &quot;should&quot;: [],
                          &quot;filter&quot;: {
                              &quot;range&quot;: {
                                  &quot;expense_ts&quot;: {
                                      &quot;gte&quot;: new Date(startDate).getTime(),
                                      &quot;lte&quot;: new Date(endDate).getTime()
                                  }
                              }
                          },
                      }
                  },
                  &quot;sort&quot;: [{ &quot;expense_ts&quot;: { &quot;order&quot;: &quot;asc&quot; } }]
              }
          
              $.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();
                      $(&quot;#expenseList&quot;).html(&quot;&quot;);
                  }
          
                  expenseTable = $(&quot;#expenseList&quot;).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']] = {
                              &quot;order&quot;: oSettings.aaSorting[0][1]
                          };
                          queryParams.sort = [sortingJson];
                          queryParams.query['bool']['must'] = [];
                          queryParams.query['bool']['should'] = [];
                          delete queryParams.query['bool'][&quot;minimum_should_match&quot;];
                          queryParams['size'] = oSettings._iDisplayLength;
                          queryParams['from'] = oSettings._iDisplayStart;
          
                          queryParams.query['bool']['must'].push({
                              &quot;match&quot;: {
                                  &quot;user_id&quot;: USER_OBJ[&quot;username&quot;]
                              }
                          })
          
                          skyLoader(&quot;show&quot;);
          
                          oSettings.jqXHR = $.ajax({
                              &quot;dataType&quot;: 'json',
                              &quot;contentType&quot;: 'application/json',
                              &quot;type&quot;: &quot;POST&quot;,
                              &quot;url&quot;: sSource,
                              &quot;data&quot;: JSON.stringify(queryParams),
                              success: function (data) {
                                  skyLoader(&quot;hide&quot;);
                                  let resultData = {};
          
                                  if(data[&quot;status&quot;]){
                                      let resultData = data.result.data;
                                      resultData['draw'] = oSettings.iDraw;
                                      EXPENSE_LIST = resultData['data'];
                                      fnCallback(resultData);
                                  }
                              }
                          });
          
                      }
                  });
              }, 400);
      }
  </code></pre>