1

I use the jquery library in order to display a sql result. On the first page of the datatable the previous button is by default deactivated. However I want it to be hidden, same goes for the next button on the last page.

As it is deactivated automatically I was thinking that there might be a parameter or sth to hide it instead, however I was not finding much during my research.

My table looks like this:

    $('#userTable').DataTable();    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/> 
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<table id="userTable">
  <thead>
    <tr>
    <th>heading1</th>
    <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>element11</td>
    <td>element12</td>
    </tr>
    <tr>
    <td>element21</td>
    <td>element22</td>
    </tr>
    <tr>
    <td>element31</td>
    <td>element32</td>
    </tr>
    <tr>
    <td>elementN1</td>
    <td>elementN2</td>
    </tr>
  </tbody>
</table>

5
  • so, can you post your question like this: stackoverflow.com/help/mcve Commented May 15, 2018 at 13:27
  • I don't have any code which is trying to solve the problem because I don't know how to do it!?
    – misanthrop
    Commented May 15, 2018 at 13:29
  • you don't have any html and jquery that you can show? even the datatable isn't coded by you? Commented May 15, 2018 at 13:34
  • ok, of course I have some "SourceCode" - it just does not try to solve the described problem so far, that's why I did not put any sourcecode with it - because I thought my text helps much more... However I now added the code.
    – misanthrop
    Commented May 15, 2018 at 13:38
  • maybe you can take some time to read the documentation of jquery datatables datatables.net/reference/api/page.info() with that, you can get some info and then work with some 'if and adjust the table Commented May 15, 2018 at 14:07

2 Answers 2

7

I have managed it by using the following code to my CSS file:

 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active
 {
    display:none;
 }
0

DataTable has a language option for overriding default values. For the previous and next values, you may add this option when generating the table

...,
language: {
  paginate: {
  previous: 'My previous',
  next: 'My next'
  }
},

Note// If you just need the carets without any text, you can try this

...,
language: {
  paginate: {
    previous: `<span class='hidden></span>`,
    next: `<span class='hidden></span>`
  }
},

And add some css (I am using sass for this).

  .dataTables_paginate .paginate_button {
    &.next,
    &.previous {
      cursor: pointer;
      a {
        display: none;
      }
      &.disabled {
        cursor: not-allowed;
      }
    }
  }

  .dataTables_paginate .paginate_button.next {
    &::after {
      padding-left: 12px;
    }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.