jquery datatable pagingType对齐问题答案

【问题标题】：jquery datatable pagingType alignment problemjquery datatable pagingType对齐问题
【发布时间】：2021-08-09 08:09:28
【问题描述】：

jQuery 数据表

我试过这样

"pageLength": 5,
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

我得到了类似的结果

FirstPrevious12NextLast

但我想要这样的结果

【问题讨论】：

请提供更多详细信息，也许是您尝试过的在问题中重现问题的功能示例

标签： javascript jquery css datatables

【解决方案1】：

$(document).ready(function() {
  $('#example').DataTable({
    "pagingType": "full_numbers",
    "lengthMenu": [
      [10, 25, 50, -1],
      [10, 25, 50, "All"]
    ],
    "pageLength": 1,
    ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      },
      {
        "data": "job"
      },
    ]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-bordered table-striped" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </tfoot>
    </table>

我认为css文件丢失了：https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css

【讨论】：

也许把你的小提琴放在问题中的代码 sn-p 中（在你解决它所具有的问题之后）"pageLength": 1, 这在这里和那个小提琴中定义了两次。