How to remove Rows per page and dropdown from Datatables?


Topic: How to remove "Rows per page" and dropdown from Datatables?

Stig Kølbæk pro premium priority asked 6 months ago

Using table version of Datatables, how can I remove the "Rows per page" and dropdown from the pagination? .. also how can I change the font size of the rest of the pagination?

I do not find any documentation on this.

<div class="datatable pagination-sm" data-mdb-entries="5" data-mdb-sm="true" data-mdb-full-pagination="false" data-mdb-hover="true" data-mdb-pagination="true" data-mdb-maxHeight="500">
  <table style="max-width: 500px; max-height: 500px;">
    <thead>
      <tr>
        <th class="th-sm" data-mdb-sort="true" data-mdb-fixed="true" data-mdb-width="100">Aktiv dato</th>
        <th class="th-sm" data-mdb-sort="false" data-mdb-fixed="true" data-mdb-width="350">Note</th>
        <th class="th-sm" data-mdb-sort="false" data-mdb-fixed="true" data-mdb-width="50">Aktiv</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>16-11-2021</td>
        <td>Some text</td>
        <td>
            <button type="button" class="btn btn-primary btn-floating btn-sm">
              <i class="fas fa-download"></i>
            </button>        
        </td>
      </tr>
    </tbody>
  </table>
</div>

Grzegorz Bujański staff answered 6 months ago

Unfortunately, there is no option to disable only certain pagination elements. You can easily hide them using css:

.datatable-select-wrapper {
  display: none;
}

To change the part size you also need to use css too:

.datatable-pagination-nav {
  font-size: 2rem;
}

Stig Kølbæk pro premium priority commented 6 months ago

Great @Grzegorz Bujański that fixed my issue :-) .. while I have you, is it possible to style the pagination like in the example here https://mdbootstrap.com/docs/standard/navigation/pagination/ under "Disabled and active states"


Grzegorz Bujański staff commented 6 months ago

Unfortunately not. This would require changes directly in the component. But I will add this to our idea board, and maybe one day we will add the ability to use such pagination.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.0
  • Device: Firefly
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No