Angular DataTables Server side pagination & Sorting

Installation : https://l-lin.github.io/angular-datatables/#/getting-started

Add a table to angular view

<table datatable [dtOptions]="dtOptions" style="width: 99.5% !important;" class="table table-responsive-sm table-bordered table-striped table-sm">

                                                <thead>

                                                    <tr>

                                                    <th>Client ID</th>

                                                    <th>Client Name</th>

                                                    <th>Client Phone</th>

                                                    <th>Join Date</th>

                                                    <th>Email</th>

                                                    <th>Is Active</th>

                                                    <th>Operation</th>

                                                    </tr>

                                                </thead>

                                                <tbody *ngIf="modelList && modelList?.length != 0">

                                                    <tr *ngFor="let m of modelList">

                                                    <td>{{ m.ClientID }}</td>

                                                    <td>{{ m.ClientName }}</td>

                                                    <td>{{ m.ClientPhone }}</td>

                                                    <td>{{ m.JoinDate | date : "MMM d, y" }}</td>

                                                    <td>{{ m.Email}}</td>

                                                    <td>

                                                            <div class="btn-group project-list-ad" *ngIf="m.IsActive">

                                                                    <button class="btn btn-white btn-xs">Active</button>

                                                            </div>

                                                            <div class="btn-group project-list-ad-rd" *ngIf="!m.IsActive">

                                                                    <button class="btn btn-white btn-xs">Unactive</button>

                                                            </div>

                                                    </td>

                                                    <td>

                                                        <button class="btn btn-pill btn-dark" type="button" (click)='editbuttonClick(m.ClientID)'>

                                                        <i class="fa fa-file-o fa-sm mt-1"></i>&nbsp;Edit

                                                        </button>

                                                    </td>

                                                    </tr>

                                                </tbody>

                                                <tbody *ngIf="!modelList || modelList?.length == 0">

                                                    <tr>

                                                    <td colspan="3" class="no-data-available">No data!</td>

                                                    </tr>

                                                <tbody>

                                                </table>

Type ScriptCode

dtOptions: DataTables.Settings = {};

public modelList: ClientList[]; // your model for store dataset

    this.dtOptions = {

      pagingType: 'full_numbers',

      pageLength: 10,

      serverSide: true,

      processing: true,

      ajax: (dataTablesParameters: any, callback) => {

        that._http

          .post<DataTablesResponse>(

            //'https://angular-datatables-demo-server.herokuapp.com/',

            this.env.apiUrl + 'api/setup/ClientList_SelectAll_Grid',

            dataTablesParameters, {}

          ).subscribe(resp => {

            //console.log(dataTablesParameters);

            that.modelList = resp.data;

            callback({

              recordsTotal: resp.recordsTotal,

              recordsFiltered: resp.recordsFiltered,

              data: []

            });

          });

      },

      columns: [{ data: 'ClientID' }, { data: 'ClientName' }, { data: 'ClientPhone' }, { data: 'JoinDate' }, { data: 'Email' }, { data: 'IsActive' }, { defaultContent: '', orderable: false }]

    };

export class DataTablesResponse {

    data: any[];

    draw: number;

    recordsFiltered: number;

    recordsTotal: number;

    error :string;

  }

C# Server Side Code

 public class DataTablesRootObject

    {

        public int draw { get; set; }

        public List<Column> columns { get; set; }

        public List<Order> order { get; set; }

        public int start { get; set; }

        public int length { get; set; }

        public Search search { get; set; }

    }

    public class Search

    {

        public string value { get; set; }

        public string product_segment { get; set; }

        public string branchid { get; set; }

        public string username { get; set; }

        public string vendorno { get; set; }

        public string fromdate { get; set; }

        public string todate { get; set; }

        public bool regex { get; set; }

    }

    public class Column

    {

        public string data { get; set; }

        public string name { get; set; }

        public bool searchable { get; set; }

        public bool orderable { get; set; }

        public Search search { get; set; }

    }

    public class Order

    {

        public int column { get; set; }

        public string dir { get; set; }

    }

public class DataTablesResponse

    {

        public object data { get; set; }

        public int draw { get; set; }

        public int recordsFiltered { get; set; }

        public int recordsTotal { get; set; }

        public string error { get; set; }

    }

public DataTablesResponse ClientList_SelectAll_Grid([FromBody] DataTablesRootObject dataTablesRootObject)

        {

            //[FromBody] DataTablesRootObject dataTablesRootObject

            DataTablesResponse r = new DataTablesResponse();

            try

            {

                string searchText = "";

                if (dataTablesRootObject.search != null)

                {

                    searchText = dataTablesRootObject.search.value;

                }

                #region single sort code

                string sortInformAtion = "";

                if (dataTablesRootObject.order != null && dataTablesRootObject.order.Count > 0)

                {

                    if (dataTablesRootObject.columns != null && dataTablesRootObject.columns.Count > 0)

                    {

                        sortInformAtion = "ORDER BY " + dataTablesRootObject.columns[dataTablesRootObject.order[0].column].data + " " + dataTablesRootObject.order[0].dir;

                    }

                    //dataTablesRootObject.order[0].column

                }

                if (string.IsNullOrEmpty(sortInformAtion))

                {

                    sortInformAtion = "ORDER BY " + dataTablesRootObject.columns[0].data + " asc";

                }

                #endregion

                string error = "";

                List<DataModel.Setup.ClientList> oListAll = serviceClientlist.GetsForGrid(dataTablesRootObject.start, dataTablesRootObject.length, sortInformAtion, ref error, searchText);

                r.data = oListAll;

                r.draw = dataTablesRootObject.draw;

                r.error = error;

                if (oListAll != null && oListAll.Count > 0)

                {

                    r.recordsTotal = oListAll[0].RecordCount;

                    r.recordsFiltered = oListAll[0].RecordFilter;

                }

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message + ex.StackTrace);

            }

            return r;

        }

When table is not refresing after data added then add following code

Add trigger in html page

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" id="user-table"

                   class="table table-responsive-sm table-bordered table-striped table-sm">

Type Script code

implements AfterViewInit

 

declaration code

@ViewChild(DataTableDirective)

  dtElement: DataTableDirective;

dtTrigger: Subject<TempRChallan> = new Subject();

  ngAfterViewInit(): void {

    this.dtTrigger.next();

  }

  //ngOnDestroy(): void {

  //   Do not forget to unsubscribe the event

  //  this.dtTrigger.unsubscribe();

  //}

  rerender(): void {

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {

      // Destroy the table first

      dtInstance.destroy();

      // Call the dtTrigger to rerender again

      this.dtTrigger.next();

    });

  }

Call rerender method for table data reload.

Comments:10

UnknownJune 25, 2020 at 4:08 AM
how to user serverside in angular with type get not post?
SuryapalsinhJuly 29, 2020 at 8:24 AM
when calling render function after adding new data , its only showing last added record. Not showing other records. Can you please help ? How can i fixed to show all records including newly added record.

--
Thanks
Saumyadip Das BlogsMarch 15, 2021 at 11:49 PM
Your blog is really informative. Thanks a ton for posting it.
Sincerely appreciate it.

When I am using POST instead of the GET, I am getting 405 error. But with GET data comes fine. But I need server side paginations and all.

Do you have any tutorial for the same with the Spring Boot Rest Endpoint integration?

Thanks! :)
vijiJune 9, 2021 at 1:47 AM
can you please mention the source code link please
himeshJune 14, 2023 at 7:46 AM
This comment has been removed by the author.
himeshJune 14, 2023 at 7:48 AM
Data is fetching from server and binding to that.modelList = resp.data; but it is not reflecting table, could you please help