Add AJAX callback and new server side examples

Author: shanmukhateja

demo/src/app/app.component.html

@@ -41,6 +41,12 @@ <h3>
               <li>
                 <a class="waves-effect waves-blue" routerLink="/basic/with-options">With options</a>
               </li>
+              <li>
+                <a class="waves-effect waves-blue" routerLink="/basic/with-ajax-callback">AJAX using DT callback</a>
+              </li>
+              <li>
+                <a class="waves-effect waves-blue" routerLink="/basic/new-server-side">Server side</a>
+              </li>
               <li>
                 <a class="waves-effect waves-blue" routerLink="/advanced/row-click-event">Row click event</a>
               </li>

demo/src/app/app.module.ts

@@ -46,6 +46,8 @@ import { FAQComponent } from './f-a-q/f-a-q.component';
 import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.component';
 import { DemoNgComponent } from './advanced/demo-ng-template-ref.component';
 import { MoreHelpComponent } from './more-help/more-help.component';
+import { WithAjaxCallbackComponent } from './basic/with-ajax-callback/with-ajax-callback.component';
+import { NewServerSideComponent } from './basic/new-server-side/new-server-side.component';
 
 @NgModule({
   declarations: [
@@ -78,7 +80,9 @@ import { MoreHelpComponent } from './more-help/more-help.component';
     FAQComponent,
     UsingNgTemplateRefComponent,
     DemoNgComponent,
-    MoreHelpComponent
+    MoreHelpComponent,
+    WithAjaxCallbackComponent,
+    NewServerSideComponent
   ],
   imports: [
     BrowserModule,

demo/src/app/app.routing.ts

@@ -28,6 +28,8 @@ import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
 import { FAQComponent } from './f-a-q/f-a-q.component';
 import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.component';
 import { MoreHelpComponent } from './more-help/more-help.component';
+import { WithAjaxCallbackComponent } from './basic/with-ajax-callback/with-ajax-callback.component';
+import { NewServerSideComponent } from './basic/new-server-side/new-server-side.component';
 
 const routes: Routes = [
     {
@@ -63,6 +65,14 @@ const routes: Routes = [
         path: 'basic/with-ajax',
         component: WithAjaxComponent
     },
+    {
+        path: 'basic/with-ajax-callback',
+        component: WithAjaxCallbackComponent
+    },
+    {
+        path: 'basic/new-server-side',
+        component: NewServerSideComponent
+    },
     {
         path: 'basic/angular-way',
         component: AngularWayComponent

demo/src/app/basic/new-server-side/new-server-side.component.css

@@ -0,0 +1,5 @@
+<ng-template #preview>
+  <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+</ng-template>
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+</app-base-demo>

demo/src/app/basic/new-server-side/new-server-side.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewServerSideComponent } from './new-server-side.component';
+
+describe('NewServerSideComponent', () => {
+  let component: NewServerSideComponent;
+  let fixture: ComponentFixture<NewServerSideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NewServerSideComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NewServerSideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/basic/new-server-side/new-server-side.component.spec.ts

@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { DataTablesResponse } from 'app/datatables-response.model';
+
+@Component({
+  selector: 'app-new-server-side',
+  templateUrl: './new-server-side.component.html',
+  styleUrls: ['./new-server-side.component.css']
+})
+export class NewServerSideComponent implements OnInit {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  pageTitle = 'Server-side processing';
+  mdIntro = 'assets/docs/basic/new-server-side/intro.md';
+  mdHTML = 'assets/docs/basic/new-server-side/source-html.md';
+  mdTS = 'assets/docs/basic/new-server-side/source-ts.md';
+
+  dtOptions: DataTables.Settings = {};
+
+  ngOnInit(): void {
+    const that = this;
+    this.dtOptions = {
+      serverSide: true,
+      ajax: (dataTablesParameters: any, callback) => {
+        that.http
+          .post<DataTablesResponse>(
+            'https://xtlncifojk.eu07.qoddiapp.com/',
+            dataTablesParameters, {}
+          ).subscribe(resp => {
+            callback({
+              recordsTotal: resp.recordsTotal,
+              recordsFiltered: resp.recordsFiltered,
+              data: resp.data
+            });
+          });
+      },
+      columns: [{
+        title: 'ID',
+        data: 'id'
+      }, {
+        title: 'First name',
+        data: 'firstName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      }]
+    };
+  }
+}
+

demo/src/app/basic/new-server-side/new-server-side.component.ts

@@ -0,0 +1,5 @@
+<ng-template #preview>
+  <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+</ng-template>
+<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML" [mdTS]="mdTS" [template]="preview">
+</app-base-demo>

demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WithAjaxCallbackComponent } from './with-ajax-callback.component';
+
+describe('WithAjaxCallbackComponent', () => {
+  let component: WithAjaxCallbackComponent;
+  let fixture: ComponentFixture<WithAjaxCallbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WithAjaxCallbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WithAjaxCallbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.spec.ts

@@ -0,0 +1,50 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { DataTablesResponse } from 'app/datatables-response.model';
+
+@Component({
+  selector: 'app-with-ajax-callback',
+  templateUrl: './with-ajax-callback.component.html'
+})
+export class WithAjaxCallbackComponent implements OnInit {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  pageTitle = 'AJAX with callback';
+  mdIntro = 'assets/docs/basic/with-ajax-callback/intro.md';
+  mdHTML = 'assets/docs/basic/with-ajax-callback/source-html.md';
+  mdTS = 'assets/docs/basic/with-ajax-callback/source-ts.md';
+
+  dtOptions: DataTables.Settings = {};
+
+  ngOnInit(): void {
+    const that = this;
+    this.dtOptions = {
+      ajax: (dataTablesParameters: any, callback) => {
+        that.http
+          .post<DataTablesResponse>(
+            'https://xtlncifojk.eu07.qoddiapp.com/',
+            dataTablesParameters, {}
+          ).subscribe(resp => {
+            callback({
+              recordsTotal: resp.recordsTotal,
+              recordsFiltered: resp.recordsFiltered,
+              data: resp.data
+            });
+          });
+      },
+      columns: [{
+        title: 'ID',
+        data: 'id'
+      }, {
+        title: 'First name',
+        data: 'firstName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      }]
+    };
+  }
+}