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

[ritikaChauhan]

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 androidparth@gmail.com

[l-lin]

You forgot to pass the dataTablesParameters to your GET request, thus, your server does not get any parameters like the pagination, the index, etc...

[morwalz]

I can see there is some code added for server side pagination. @l-lin when is the planned release for this feature. Waiting for long.

[l-lin]

@morwalz, the code were just for the demo, nothing on the code... Everything are already available on the latest version :sweat_smile:

[musmanzpak]

@l-lin could you please share the latest version of the Angular way Datatable? I am unable to send some specific value in angular to webApi to getting specific data only. Please guide. Thank You.

[l-lin]

Everything is in the documentation.

[morwalz]

Yes.. it is working great. We are using it now.

On 5 April 2018 at 22:55, Louis LIN notifications@github.com wrote:

Everything is in the documentation https://l-lin.github.io/angular-datatables/.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/l-lin/angular-datatables/issues/1169#issuecomment-379013426, or mute the thread https://github.com/notifications/unsubscribe-auth/ADgjaSQ35PXPUL3RjxugqyMc3QL10RAFks5tllOQgaJpZM4RwJwi .

-- REGARDS Shankar Lal Morwal MOB. NO,+91-9999009529

"Remember, no human condition is ever permanent. Then you will not be overjoyed in good fortune nor too scornful in misfortune -Socrates"

[jayantsr83]

Getting the following error using http.post

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

[mohammad-quanit]

@l-lin please tell me how to use this method by GET request....I have an api of get request and i simply want to load data from it. I m getting full data when i am using post request...

[srinivasteella]

Hi, I have resolved this issue. Please connect me on androidparth@gmail.com

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.

Hi Ritika,

I see you are facing an issue with search, paging, and sort with http.get. I am also stuck in the same problem. Would you mind reply to me on how did you get this working?

Many thanks.

[lukeangular]

I am stuck with the same issue please reply me