title: DataTables pagination css broken in modal datatables
body: <p>How do I customize the css of datatables?
  My pagination seems broken when I am trying to use datatables function in Modal bootstrap.</p>
  
  <p>Also, how can I limit the pagination number that appear in <code>html</code> 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 ?</p>
  
  <p>The pagination and the row count are just like in a image below.</p>
  
  <p><strong>My datatables script</strong> </p>
  
  <pre><code> $('#example').DataTable( {
      "ajax": "&lt;?php echo base_url('dashboard/show_karyawan'); ?&gt;",
  
      "columns": [
         {
            "data": "id",
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
               }
        },
          { "data": "NIP" },
          { "data": "nama" },
  
      ]
  } );
  </code></pre>
  
  <p><strong>My Modal</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="modalkaryawan" role="dialog" aria-hidden="true" data-backdrop="false"&gt;
   &lt;div class="modal-dialog modal-lg"  style="width: 500px;"&gt;
    &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;div class="modal-title"&gt;
             &lt;center&gt;&lt;h4&gt;Silahkan Pilih Karyawan&lt;/i&gt;&lt;/h4&gt;&lt;/center&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
        &lt;table id="example" class="table table-striped display" cellspacing="0" width="100%"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;td&gt;No&lt;/td&gt;
            &lt;td&gt;NIP&lt;/td&gt;
            &lt;td&gt;Nama Pegawai&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
  
        &lt;/tbody&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;td&gt;No&lt;/td&gt;
            &lt;td&gt;NIP&lt;/td&gt;
            &lt;td&gt;Nama Pegawai&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;/table&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
        &lt;center&gt;
            &lt;button type="button" id="savesebab_delete" class="btn btn-primary"&gt;Ya&lt;/button&gt;
            &lt;button type="button" data-dismiss="modal" class="btn btn-danger"&gt;Tidak&lt;/button&gt;
          &lt;/center&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/0Vg63.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Vg63.jpg" alt="enter image description here"></a></p>