Table pagination doen&#180;t show all arrows.

Topic: Table pagination doen´t show all arrows.

Quiles Estruch free asked 2 years ago

Sorry for my bad english. I have old version mdbootstrap, and angular 7.2.0 and 4.7 md mdbootstrap.I make i table with paggination, but only appear two icons, when it shoul have 4 icons, two move one and one position, and two to finish table and beging table.Actual behavior*Only appear two, the most curious it´s that icons are the final and beginin but works step and step one position?*Resources (screenshots, code snippets etc.) @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective; @ViewChild('userModal') userModal:any;

public noResults: boolean = false; public elements: any = []; public previous: any = [];

this.mdbTable.setDataSource(this.items); this.items = this.mdbTable.getDataSource(); this.previous = this.mdbTable.getDataSource();

this.mdbTablePagination.setMaxVisibleItemsNumberTo(10); this.mdbTablePagination.calculateFirstItemIndex(); this.mdbTablePagination.calculateLastItemIndex(); this.cdRef.detectChanges();

HTML enter image description here

Only show Two icons.

Arkadiusz Idzikowski staff commented 2 years ago

@Quiles Estruch Could you please edit your post and provide a full HTML/TS code so we can reproduce this problem on our end? Also please check and confirm the MDB Angular version that you use. You mentioned v7.5.1 in the specification of the issue, but the first/last page buttons visible on the screenshot were added in v8.

Add comment

Quiles Estruch free answered 2 years ago

0 0 Best answer

<p></p>

<pre class="prettyprint"><code>      
      <thead>
      <tr >
        <th class="text-center" *ngFor="let head of headElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="items" [sortBy]="headElements[i].value" style="cursor: pointer">{{headElements[i].label }}
          <mdb-icon fas icon="sort"></mdb-icon>
        </th>
        <th class="text-center">
          Options
        </th>
      </tr>
      </thead>

<tbody>
      <tr *ngFor="let item of items;let i = index" class="vertical-middle">

<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
            <div class="button-options">

</div>

</td>
      </tr>
      </tbody>
      <tfoot class="grey lighten-5 w-100">
        <tr>
          <td colspan="7">
            <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="items"></mdb-table-pagination>
          </td>
        </tr>
        </tfoot>
      
    </table>
</code></pre>

<p>this all html content but replace info for <strong>data1</strong> because it´s sensible information
I hope that´s all you need ¿?</p>

Please insert min. 20 characters.

      <!--Table head-->
      <thead>
      <tr >
        <th class="text-center" *ngFor="let head of headElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="items" [sortBy]="headElements[i].value" style="cursor: pointer">{{headElements[i].label }}
          <mdb-icon fas icon="sort"></mdb-icon>
        </th>
        <th class="text-center">
          Options
        </th>
      </tr>
      </thead>
      <!--Table head-->

      <!--Table body-->
      <tbody>
      <tr *ngFor="let item of items;let i = index" class="vertical-middle">

        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
            <div class="button-options">

                <button type="button" mdbBtn class="boton-info"  size="sm" (click)="info(item)" mdbWavesEffect>
                    <mdb-icon fas icon="info"></mdb-icon>
                  </button>
                <button type="button" mdbBtn class="boton-edit"  size="sm" (click)="edit(item.id)" mdbWavesEffect>
                  <mdb-icon fas icon="pencil-alt"></mdb-icon>
                </button>
                <button type="button" mdbBtn class="boton-delete"  (click)="delete(item.id,basicModal)" size="sm" mdbWavesEffect>
                    <mdb-icon far icon="trash-alt"></mdb-icon>
                </button>

              </div>

        </td>
      </tr>
      </tbody>
      <tfoot class="grey lighten-5 w-100">
        <tr>
          <td colspan="7">
            <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="items"></mdb-table-pagination>
          </td>
        </tr>
        </tfoot>
      <!--Table body-->
    </table>

this all html content but replace info for data1 because it´s sensible information I hope that´s all you need ¿?

Arkadiusz Idzikowski staff commented 2 years ago

@Quiles Estruch We tried to reproduce the problem on our end but without success. Please check if there are any errors in the browser console when you try to render the component.

Can you also confirm which version of MDB Angular do you use? As I mentioned in my previous comment, you added v7.5.1 to the specification of this issue, but some of the elements visible on the provided screenshots were added in v8.

Quiles Estruch free commented 2 years ago

Thanks for your answer, but i have a lot tables with this problem, in one project, the project now it´s huge, it´s an inconvenience push or filter (to/by/for) search specific items. It´s possible if you can pass the example, althougth static data, it´s possible there is a problem, that isn´t easy to see. Please and thanks for your helpful.

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: Free
Premium support: No
Technology: MDB Angular
MDB Version: MDB4 7.5.1
Device: any
Browser: any
OS: any
Provided sample code: No
Provided link: No

Quiles Estruch

20Support score
2Questions 1Answers 0Snippets