Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2022

  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 Posts: 2Questions: 1Answers: 0

  December 2022

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  December 2022

  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