Is it possible to add specific parameters to the pagination? Example in the comments

Mandiwi

So I have the following issue:
Currently I can make the pagination work doing the following:
I have a "request" with 100+ items coming from my backend and I can make the pagination work fine with just adding the datatable and setting "paging: true".

However bringing 100+ items at once seems a little overpowered so I made the following change to the request:
'MYURL/?skip=0&take=10'

So now, skip is my page and take is how many items I want from that page.

Can I with Datatables itself find a way to add the parameters to the buttons? How do I do that? I've been reading the documentation but there are so many things that I can't figure out a way to implement that?

For example, with each "Next" the 'MYURL/?skip=0&take=10' jumps to 'MYURL/?skip=1&take=10' ,

How does it works?

kthorngren

100+ rows shouldn't be a problem. Do you see performance issues with the page?

Datatables provides a server paging solution called Server Side Processing. See the SSP docs and the SSP protocol for more details. Its a bit more complicated than sending the page and number of rows. The response needs to contain recordsTotal and recordsFilter information to properly display the paging buttons. Also the protocol supports searching and sorting at the server.

If you create a solution that just returns the rows for the page without server side processing (meaning the Datatable will be client side processing) then Datatables will only see the rows returned and sorting and searching will only take place those rows at the client.

Kevin

Mandiwi

For better context of what I am working on:

servicePath: string = '/products?skip=0&take=10'

  url:string = environment.apiUri + this.servicePath;

  get() : Observable<Products[]> {
    return this.httpClient.get<Products[]>(this.url)
    .pipe(
      retry(2),
      catchError(this.handleError)
    )
  }

this.productsService.get().subscribe(data => {
      this.products = data
    })

<table *ngIf="products" datatable id="tableList" class="table table-hover table-striped w-100">
                  <thead >
                    <tr>
                      <th>{{ "Name" }}</th>
                      <th>{{ Price }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let product of products">
                      <td>{{product.name}}</td>
                      <td>{{product.price}}</td>
                      <td>
                        <div class=''>
                          <a href='javascript:void(0);' (click)="edit(product.id)" class='btn btn-sm btn-icon btn-outline-primary rounded-circle mr-1'>
                            <i class="fal fa-pen"></i>
                          </a>
                          <a href='javascript:void(0);' (click)="delete(product.id)" class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1'>
                            <i class="fal fa-times"></i>
                          </a>
                        </div>
                      </td>
                    </tr>
                  </tbody>

allan

That would result in both DataTables and Angular attempting to control the same DOM elements. That isn't going to end well for either! You would be better using data and feeding the products array in there so just DataTables can control the DOM for its table.

Allan