DataTables 分页 css 在模态数据表中损坏

Question

如何自定义数据table的css？当我尝试在 Modal bootstrap.

中使用 datatables 函数时，我的分页似乎被破坏了

另外，在数据量很大的情况下，如何限制html出现的分页数？例如，在分页 table 中它有数字 1, 2, 3, 4, 5,...,8 我怎样才能把分页变成 1, 2 , 3 ,..., 8 ?

分页和行数如下图所示。

我的数据table脚本

 $('#example').DataTable( {
    "ajax": "<?php echo base_url('dashboard/show_karyawan'); ?>",

    "columns": [
       {
          "data": "id",
          render: function (data, type, row, meta) {
              return meta.row + meta.settings._iDisplayStart + 1;
             }
      },
        { "data": "NIP" },
        { "data": "nama" },

    ]
} );

我的模态

<div class="modal fade" id="modalkaryawan" role="dialog" aria-hidden="true" data-backdrop="false">
 <div class="modal-dialog modal-lg"  style="width: 500px;">
  <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">
           <center><h4>Silahkan Pilih Karyawan</i></h4></center>
        </div>
      </div>
      <div class="modal-body">
      <table id="example" class="table table-striped display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <td>No</td>
          <td>NIP</td>
          <td>Nama Pegawai</td>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <tfoot>
        <tr>
          <td>No</td>
          <td>NIP</td>
          <td>Nama Pegawai</td>
        </tr>
      </tfoot>
      </table>
      </div>
      <div class="modal-footer">
      <center>
          <button type="button" id="savesebab_delete" class="btn btn-primary">Ya</button>
          <button type="button" data-dismiss="modal" class="btn btn-danger">Tidak</button>
        </center>
      </div>
  </div>
</div>

Answer 1

为了限制分页数，请在脚本中初始化 datatable 之前添加以下代码：

$.fn.DataTable.ext.pager.numbers_length = 5;

这将确保您有 5 个页码，包括“...”。

我在这里做了一个示例演示：https://codepen.io/Sahero/pen/VzzpvE。

DataTables 分页 css 在模态数据表中损坏

DataTables pagination css broken in modal datatables

html

javascript

css

datatable

datatables-1.10