使用 Bootstrap 5 主题搜索字段和显示条目未对齐的 jquery 表

Posted 2023-05-08

【中文标题】使用 Bootstrap 5 主题搜索字段和显示条目未对齐的 jquery 表

【英文标题】：Search Field and Show Entry miss-aligned jquery table with Bootstrap5 theme

【发布时间】：2021-10-19 03:07:35

【问题描述】：

我在使用 Bootstrap 5 主题制作简单的 DataTable 时遇到了一些麻烦。主要问题是“显示条目”和“搜索栏”以及表格底部的页面部分未对齐（最好在下图中看到）。我必须提到，如果我使用其他样式，它们是对齐的。该问题仅适用于 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>

表格的 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>

该表是使用 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]);
            
        );
    
);

)

【参考方案1】：

此示例适用于 Bootstrap 5 主题。 我为你做了一个 jsfiddle：https://jsfiddle.net/bogatyr77/g7ntd8rk/8/ 只需使用 Result 窗口，您就会看到 Search 和其他 Stuff 调整得很好。

$(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>

【讨论】：

谢谢。我使用了 DataTables 的 packagegase，并设法使外观看起来不错。所以我假设其余的检查这个主题，确保你有正确的顺序包含正确的 js 和 css 文件