title: How to make angular-datatable update rows, number of results and pagination while using an observable as a data source
body: <p>I'm trying to use angular-datatables in my angular 7 application as component for displaying search results.</p>
  
  <p>The request-creation-component create a search form and when a submit button is clicked a http Post request is sent to the backend using a request-service, the request-creation-component then updates an observable in the request-service which the request-result-component is subscribed to.</p>
  
  <p>My problem is that the datatable used to display the results doesn't update the rows, number of results and pagination buttons when it gets new results.</p>
  
  <p>The rows, number of results and pagination buttons stay the same as the first time the datatable was displayed.</p>
  
  <p>The request-result-component code</p>
  
  <pre class="lang-js prettyprint-override"><code>requestResponse;
  resultsAreFound = true;
  constructor(private requestService: RequestService) { }
  public dataTable: DataTable;
  
  ngOnInit() {
          this.dataTable =  {headerRow : null, footerRow: null, dataRows: null };
  
          this.requestService.currentSearchResult.subscribe(result =&gt; {
              this.requestResponse = result;
              if (result.length &gt; 0) {
              this.resultsAreFound = true;
               // If it gets results, the datatable is assigned the new data. 
                  this.dataTable.headerRow = Object.keys(this.requestResponse[0]);
                  this.dataTable.footerRow = Object.keys(this.requestResponse[0]);
                  this.dataTable.dataRows = this.requestResponse.map(function(i: { [s: string]: {}; } | ArrayLike&lt;{}&gt;) {
                          return Object.values(i);
                      });
              } else {
                  // If it gets empty result, the datatable will be hidden and "0 results" message appears.
                  this.resultsAreFound = false;
              }
           });
          }
  
  ngAfterViewInit() {
          $('#datatable').DataTable({
              'pagingType': 'full_numbers',
              'lengthMenu': [
                  [10, 25, 50, -1],
                  [10, 25, 50, 'All']
              ],
              responsive: true,
              language: {
                  search: '_INPUT_',
                  searchPlaceholder: 'Search records',
              }
          });
  </code></pre>
  
  <p>The request-result-component template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="main-content" style="margin-top: 50px;"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="card"&gt;
                    &lt;div [hidden]="resultsAreFound" class="card-header"&gt;
                      &lt;h4 class="card-title"&gt;0 Resultats trouvées.&lt;/h4&gt;
                    &lt;/div&gt;
                      &lt;div [hidden]="!resultsAreFound" class="card-body"&gt;
                          &lt;div class="toolbar"&gt;
                          &lt;/div&gt;
                            &lt;table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                        &lt;th&gt;{{ dataTable.headerRow[0] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.headerRow[1] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.headerRow[2] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.headerRow[3] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.headerRow[4] }}&lt;/th&gt;
                                        &lt;th class="disabled-sorting text-right"&gt;{{ dataTable.headerRow[5] }}&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tfoot&gt;
                                      &lt;tr&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[0] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[1] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[2] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[3] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[4] }}&lt;/th&gt;
                                        &lt;th&gt;{{ dataTable.footerRow[5] }}&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/tfoot&gt;
                                  &lt;tbody&gt;
                                      &lt;tr *ngFor="let row of dataTable.dataRows"&gt;
                                          &lt;td&gt;{{row[0]}}&lt;/td&gt;
                                          &lt;td&gt;{{row[1]}}&lt;/td&gt;
                                          &lt;td&gt;{{row[2]}}&lt;/td&gt;
                                          &lt;td&gt;{{row[3]}}&lt;/td&gt;
                                          &lt;td&gt;{{row[4]}}&lt;/td&gt;
                                          &lt;td class="text-right"&gt;
                                            &lt;a href="#" class="btn btn-danger btn-link btn-icon btn-sm remove"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
                                          &lt;/td&gt;
  
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;!-- end content--&gt;
                  &lt;/div&gt;
                  &lt;!--  end card  --&gt;
              &lt;/div&gt;
              &lt;!-- end col-md-12 --&gt;
          &lt;/div&gt;
          &lt;!-- end row --&gt;
  &lt;/div&gt;
  
  
  
  
  </code></pre>