How to remove &quot;Rows per page&quot; and dropdown

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

Stig Kølbæk priority asked 3 years 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>

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

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 priority commented 3 years 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 3 years 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

Stig Kølbæk

107Support score
11Questions 6Answers 1Snippets