CODEWITHSUNDEEP
javascripthtmlcssdatatabledatatables-1.10
Gagantous
Gagantous

Reputation: 518

DataTables pagination css broken in modal datatables

How do I customize the css of datatables? My pagination seems broken when I am trying to use datatables function in Modal bootstrap.

Also, how can I limit the pagination number that appear in html when there are so many data ? For example, in the pagination table it have number 1, 2, 3, 4, 5,...,8 how can I make the pagination into 1, 2 , 3 ,..., 8 ?

The pagination and the row count are just like in a image below.

My datatables script 

 $('#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" },

    ]
} );

My Modal

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

enter image description here

Upvotes: 0

Views: 1586

Answers (1)

Ofisora
Ofisora

Reputation: 2737

For limiting the pagination number add the following code before you initialize the datatable inside the script:

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

This will make sure that you will have 5 page numbers includeing '...'.

I have made a sample demo here: https://codepen.io/Sahero/pen/VzzpvE.

Upvotes: 1

Related Questions