搜索字段和显示条目未对齐 jquery table 与 Bootstrap 5 主题

Question

我在制作带有 Bootstrap 5 主题的简单 DataTable 时遇到了一些问题。主要问题是“显示条目”和“搜索栏”以及 table 底部的页面部分未对齐（最好在下图中看到）。我必须提到，如果我使用其他样式，它们会被对齐。该问题仅适用于 bootstrap 5 个主题数据表

Snip Picture

我已经包含了所有必要的插件：

<!--css plugins for table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">


<!--js plugins for table-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

table 的 html 部分非常基础：

<section class="container shadow">
        <div class="table-responsive">
            <table id="lista_proiecte" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Judet</th>
                        <th>Localitate principala</th>
                        <th>Siruta superioara</th>
                        <th>Localitati apartenente </th>
                        <th>Sirute inferioare</th>
                        <th>Tipul solicitarii</th>
                        <th>Data intrare</th>
                        <th>Ultimul status</th>
                        <th>Utilizator</th>
                        <th>Deadline</th>
                    </tr>
                </thead>
            </table>
        </div>
</section>

table 是使用 AJAX 从 SQL 数据库自动填充的。我不太确定它是否有所作为，但我会把它放在这里。

$(document).ready(function(){
var dataTable = $('#lista_proiecte').DataTable({
    "processing": true,
    "serverSide": true,
    "order":[],
    "ajax":{
        url:"php/acasa_listaproiecte_fetch.php",
        type:"POST",
        
    },

    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
    
    createdRow:function(row, data, rowIndex)
    {
        $.each($('td', row), function(colIndex){
            if(colIndex == 1)
            {
                $(this).attr('data-name', 'judet');
                $(this).attr('class', 'judet');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 2)
            {
                $(this).attr('data-name', 'localitate_principala');
                $(this).attr('class', 'localitate_principala');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 3)
            {
                $(this).attr('data-name', 'siruta_superioara');
                $(this).attr('class', 'siruta_superioara');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 4)
            {
                $(this).attr('data-name', 'localitati_apartenente');
                $(this).attr('class', 'localitati_apartenente');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 5)
            {
                $(this).attr('data-name', 'sirute_inferioare');
                $(this).attr('class', 'sirute_inferioare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 6)
            {
                $(this).attr('data-name', 'tip_solicitare');
                $(this).attr('class', 'tip_solicitare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 7)
            {
                $(this).attr('data-name', 'data_intrare');
                $(this).attr('class', 'data_intrare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 8)
            {
                $(this).attr('data-name', 'ultimul_status');
                $(this).attr('class', 'ultimul_status');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 9)
            {
                $(this).attr('data-name', 'nume_utilizator');
                $(this).attr('class', 'nume_utilizator');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 10)
            {
                $(this).attr('data-name', 'deadline');
                $(this).attr('class', 'deadline');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
        });
    }
});

})

Answer 1

此示例适用于 Bootstrap 5 主题。
我为你做了一个 jsfiddle：https://jsfiddle.net/bogatyr77/g7ntd8rk/8/
只需使用结果 window，您会看到搜索和其他内容已调整好。

$(document).ready(function() {
  $('#lista_proiecte').DataTable({
    ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
    "lengthMenu": [
      [10, 25, 50, -1],
      [10, 25, 50, "All"]
    ],
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      },
      {
        "data": "job"
      }
    ],
    "createdRow": function(row, data, dataIndex) {
      $.each($('td', row), function(colIndex) {
        if (colIndex == 1) {
          $(this).attr('data-name', 'judet');
          $(this).attr('class', 'judet');
          $(this).attr('data-type', 'text');
          $(this).attr('data-pk', data.job);
        }
      });
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<section class="container shadow">
  <div class="table-responsive">
    <table id="lista_proiecte" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Judet</th>
          <th>Localitate principala</th>
          <th>Siruta superioara</th>
          <th>Localitati apartenente </th>
          <th>Sirute inferioare</th>
          <th>Tipul solicitarii</th>
          <th>Data intrare</th>
          <th>Ultimul status</th>
          <th>Utilizator</th>
          <th>Deadline</th>
        </tr>
      </thead>
    </table>
  </div>
</section>

搜索字段和显示条目未对齐 jquery table 与 Bootstrap 5 主题

Search Field and Show Entry miss-aligned jquery table with Bootstrap5 theme

ajax

datatable

jquery

twitter-bootstrap