Server side the Angular way - unable to load datatable with custom GET Web-API

Hi, I am using Angular 5 with data-table using “https://l-lin.github.io/angular-datatables/#/getting-started”. Till now I was loading the table using the method in “Angular Way” section:

this.http.get('data/data.json')
      .map(this.extractData)
      .subscribe(persons => {
        this.persons = persons;
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();
      });

But since now the data which I get from my web service is in thousands, I am facing an issue, where the normal html table loads and then the data-table format loads. It takes about 2-3 seconds, which looks very ugly.

I understood that using the method mentioned in “Server side the Angular way”, can resolve this issue:

ngOnInit(): void {
        const that = this;

        this.dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 2,
            serverSide: true,
            processing: true,
            ajax: (dataTablesParameters: any, callback) => {
              that.http
                  .post<DataTablesResponse>(
                    'https://angular-datatables-demo-server.herokuapp.com/',
                    dataTablesParameters, {})
                  .subscribe(resp => {
                      that.persons = resp.data;


                     callback({
                          recordsTotal: resp.recordsTotal,
                          recordsFiltered: resp.recordsFiltered,
                          data: [],
                      });
                  });
            },
            columns: [
                { data: 'id' }, { data: 'firstName' }, { data: 'lastName' },
            ],
        };
    }

But on using this method with my web service having get request and sends some token data in header, the other features of data-table don’t work. For example, all the data loads in one page, and there is no pagination. Search box is visible, but it also doesn’t work. Following is my code:

HTML(accesspoints.component.html):

<table datatable [dtOptions]="dtOptions" class="table table-bordered" id="apTable" width="100%">
	<thead>
		<tr>
			<th class="sorting_disabled text-center">
				<input type="checkbox" value="" id="selectAllCheck" [(ngModel)]="isChecked" (change)="checkAllRows(isChecked)" >
			</th>
			<th>AP Serial</th>
			<th>AP Name</th>
			<th>Mac Address</th>
			<th>Cluster</th>
			<th>Zone</th>
			<th>Last Contacted</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let ap of this.apsList">
			<td class="text-center">
				<input type="checkbox" value="" [(ngModel)]="ap.selectcheckbox">
			</td>
			<td>{{ap.apserial}}</td>
			<td>{{ap.apname}}</td>
			<td>{{ap.mac}}</td>
			<td>{{ap.clustername}}</td>
			<td>{{ap.zonename}}</td>
			<td class="text-center" *ngIf="ap.last_contacted">{{ap.last_contacted | date: 'MM/dd/yyyy hh:mm:ss'}}</td>
			<td class="text-center" *ngIf="!ap.last_contacted">N/A</td>
		</tr>
	</tbody>
</table>

TYPESCRIPT(accesspoint.component.ts):

ngOnInit(): void {
		$('body').css('background-color', '#D9E0E7');
		$('#overlay').show();
const newHttpOptions = {
			headers: new HttpHeaders({ 'Content-Type': 'application/json',
				'x-access-token' : this._cookieService.get('TOKEN') })
		};


	view.dtOptions = {
			pagingType: 'full_numbers',
            pageLength: 25,
            serverSide: true,
            processing: true,
			ajax : (dataTablesParameters: any, callback) =>{
				view.http.get<DataTablesResponse>('/api/aps', newHttpOptions).subscribe(resp=>{
					console.log(resp);					
					view.response = resp;
					view.apFound = true;
					view.apsList = resp.list;
					view.apsCount = resp.totalCount;
					for (var i = 0; i < view.apsList.length; ++i) {
						view.apsList[i].selectcheckbox = false;
					}
					$('#overlay').hide();
				});
			},
			columns: [
			{ data: 'apserial' }, { data: 'apname' }, { data: 'lastmacName' }, { data : 'clustername'}, { data : 'zonename'}, { data : 'last_contacted'}
			]
		};
	}

What is the way of fetching data from get method of a web service, and show it in data-table using server side processing? Thanks.

[androidparth90]

Hi, I have resolved this issue. Please connect me on [e-mail]

[lukeangular]

I am stuck with the same issue please reply me