DataTablesページ区切りのCSSがモーダルデータテーブルで壊れています

Question

データシートのCSSをカスタマイズするにはどうすればよいですか？ Modalブートストラップでdatatables関数を使用しようとすると、私のページネーションが壊れているようです。

また、非常に多くのデータがある場合、htmlに表示されるページ番号を制限するにはどうすればよいですか？ 例えば、ページ区切り表には番号 1,2,3,4,5、...、8があります。 ページ分割を ,1,2,3、...、8にするにはどうしたらいいですか？

ページ番号と行数は、下の画像のようになります。

paginatiを制限するための私のDataTableスクリプト

$('#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;

これは、あなたが「...」をincludeing 5ページ番号を持っていることを確認します。

サンプルデモはhttps://codepen.io/Sahero/pen/VzzpvEです。