Answers

• stanleyxu2005 Posts: 5Questions: 1Answers: 0

  February 16

  Apology, my investigation is not entirely correct.
  I noticed my pagination container has a vertical padding 12px.
  so container height is 52px, button is 28px.
  so the condition is true in my case: 52 > 28*2-10
  Correct workaround is I have to remove the padding of my own style rule.

  Do you think if you should use .height() instead of .outerHeight() to check?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  February 16

  Could you give me a link to a page showing the issue so I can debug it and make any changes needed to DataTables core please?

  Thanks,
  Allan
• stanleyxu2005 Posts: 5Questions: 1Answers: 0

  February 17

  Sure. You can tweak the styles.css to fix/reproduce the issue

  https://codesandbox.io/p/sandbox/dt2-pagination-issue-zt8dnr
• stanleyxu2005 Posts: 5Questions: 1Answers: 0

  February 17

  An additional question. in v1.x, all numbered buttons are wrapped in a <span>. but in v2, all numbered buttons and the nav buttons (next/prev) are grouped together. How to write a smart rule to style numbered buttons only?

  I'd like to add some special styles to numbered buttons only, but I dont have a good to way to differenicate them with nav buttons.
• Deepikam123 Posts: 1Questions: 0Answers: 0

  March 6

  Am also facing same issue, whats the fix?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  March 6 Answer ✓

  I lost sight of this one - apologies. @stanleyxu2005 Thank you for the test case. I agree, using $().height() for the container measurement would be the correct thing to do. I've committed that change and it will be in 2.0.2 which I'll release soon (later today or tomorrow).

  Allan
• mvpasarel Posts: 1Questions: 0Answers: 0

  March 7

  I have the same issue with datatables.net-bs@2.0.1 Will this be fixed there too?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  March 7 Answer ✓

  Yes, 2.0.2 should be tagged and released today.

  Allan
• stanleyxu2005 Posts: 5Questions: 1Answers: 0

  March 7

  Thank you so much for fixing the bug @allan
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  March 7

  DataTables 2.0.2 released
• juanjovega Posts: 2Questions: 0Answers: 0

  October 21

  hi, I have the same problem in a table where I have 28 records, paginated by 20 but only page number 1 is visible, and after interacting with the dataTable page 1 and 2 already appears as it should be for this case.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  October 21

  @juanjovega This test case has 28 records with 20 records per page. Both page numbers show:
  https://live.datatables.net/zaqenire/1/edit

  What version of Datatables are you using. Please provide a test case replicating the error so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• juanjovega Posts: 2Questions: 0Answers: 0

  October 21 edited October 21

  @kthorngren I create the test case in live.datatables.net and it looks fine actually it seems very strange to me because I have the same configuration in many other parts and it works fine and I have a few other parts that I have the mentioned problem.

  it is a simple table with local pagination and my code is as follows
  the version I am using is version 2.1.0

  <h3 style="margin-left:10px;"><?php echo count($notificados); ?> notificaciones enviadas con éxito</h3>
  <div>
      <table class="display stripe hover compact" width="100%" id="tblTercerosNotificados">
          <thead>
              <tr>
                  <th>Tercero</th>
                  <th>Email</th>
              </tr>
          </thead>
          <tbody>
      <?php
  
          foreach($notificados as $notificado)
          {
              if($notificado)
              {
      ?>
              <tr>
                  <td><?php echo $notificado->getNombre(); ?></td>
                  <td><?php echo $notificado->getEmail(); ?></td>
              </tr>
      <?php
              }
          }
      ?>
          </tbody>
      </table>
  </div>
  
  

  $('#tblTercerosNotificados').DataTable({
              layout:{
                  topStart: 'buttons',
                  topEnd: 'search',
                  bottomStart: 'info',
                  bottomEnd: 'paging'
              },
              lengthMenu: [
                  [ 20, 50, 100],
                  [ 20, 50, 100]
              ],
              buttons: [
                  'pageLength',
              ],
              columnDefs: [{
                  targets: "noSort",
                  orderable: false
              }],
              order: [[ 1, "asc" ]],
          });
  
  

  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  October 22

  I am using is version 2.1.0

  The fix was added in 2.0.2. Did you use a version earlier than this? If so maybe you need to clear the browser's cache. Here is the same test case with 2.1.0 and your config and it sill works:
  https://live.datatables.net/mawihemo/1/edit

  To help debug we will need to see the issue.

  Kevin
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 22

  If the table is hidden when initialised, then this issue can happen with some of the older releases. I think it was changed recently. Try 2.1.8 (the current release at time of writing), or redrawing the table.

  Allan
• sergeyzdev Posts: 1Questions: 0Answers: 0

  November 6 edited November 6

  I ran into a similar problem with DT 2.1.8 and Bootstrap 3.3.7. There are two issues that I see:
  - Bootstrap's CSS rule ".pagination > li { display: inline}" makes "($(buttonEls[0]).outerHeight() * 2) - 10" calculate as -10 because outerHeight() returns 0
  - another built-in rule ".pagination { margin: 20px 0; }" makes the "host" element's height bigger and causes _pagingDraw() to execute many times until it reduces the number of page buttons to 1

  I'm using this URL: https://cdn.datatables.net/v/bs-3.3.7/dt-2.1.8/datatables.js
  Bootstrap CSS for reference: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  November 6

  Can you link to a page showing the issue please? This example when used with Bootstrap 3 styling (options - top right) appears to render okay.

  Allan