Angular Server Side Datatable

Angular DataTable Request Service

  getPanelServiceCalendar(tableQuery): Promise<DataTablesResponse> {
    return this.http.post<DataTablesResponse>(this.myApiUrl + "EducationCalendar",tableQuery)
      .pipe(
        retry(1)
      ).toPromise();
  }

Angular_DataTable_.Net Endpoint

[HttpPost("EducationCalendar")]
public DataTableResponse<EducationCalendar> EducationCalendar(TableRequest request)
{
    List<EducationCalendar> educations = _context.EducationCalendar.Where(x => String.IsNullOrWhiteSpace(request.SearchText) || (x.Name.Contains(request.SearchText) || x.Service.Name.Contains(request.SearchText))).Include(x => x.Service).ToList();
    DataTableResponse<EducationCalendar> educationsResponse = new DataTableResponse<EducationCalendar>();
    educationsResponse.Data = educations.Skip(request.Start).Take(request.Length).ToList();
    educationsResponse.recordsTotal = educations.Count;
    educationsResponse.recordsFiltered = educations.Count;
    return educationsResponse;
}

Angular_DataTable_.Net Request Model

public class Search
{
    [JsonPropertyName("value")]
    public string Value { get; set; }

    [JsonPropertyName("regex")]
    public bool Regex { get; set; }
}

public class Column
{
    [JsonPropertyName("data")]
    public string Data { get; set; }

    [JsonPropertyName("name")]
    public string Name { get; set; }

    [JsonPropertyName("searchable")]
    public bool Searchable { get; set; }

    [JsonPropertyName("orderable")]
    public bool Orderable { get; set; }

    [JsonPropertyName("search")]
    public Search Search { get; set; }
}

public class Order
{
    [JsonPropertyName("column")]
    public int Column { get; set; }

    [JsonPropertyName("dir")]
    public string Dir { get; set; }
}

public class TableRequest
{
    [JsonPropertyName("draw")]
    public int Draw { get; set; }

    [JsonPropertyName("columns")]
    public List<Column> Columns { get; set; }

    [JsonPropertyName("order")]
    public List<Order> Order { get; set; }

    [JsonPropertyName("start")]
    public int Start { get; set; }

    [JsonPropertyName("length")]
    public int Length { get; set; }

    [JsonPropertyName("search")]
    public Search Search { get; set; }
    public string SearchText => Search.Value;
}

Angular_DataTable_.Net Response Model

  public class DataTableResponse<T>
  {
      public List<T> Data { get; set; }
      public int draw { get; set; }
      public int recordsFiltered { get; set; }
      public int recordsTotal { get; set; }
  }

Angular_DataTable_DataTable Html

<div class="table-responsive bg-white shadow rounded mt-4">
<table datatable [dtOptions]="dtOptions"  class="row-border hover">
  <thead class="bg-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Package Name</th>
      <th scope="col">Create</th>
      <th scope="col"> </th>
      <th scope="col"> </th>
    </tr>
  </thead>
  <tbody style="position: relative;">
    <tr *ngFor="let dt of model" >
      <td>{{ dt.id }}</td>
      <td>{{ dt.name }}</td>
      <td>{{ dt.dateCreated | date:'dd.MM.yyyy HH:mm' }}</td>
      <td><a [routerLink]="['/admin/servicescalendar/edit/', dt.id]" class="btn btn-primary btn-sm float-right">Edit</a>
      </td>
      <td><a [routerLink]="" (click)="delete(dt.id)" class="btn btn-danger btn-sm float-right"><span></span>Delete</a></td>
    </tr>
  </tbody>
</table>
</div>

Angular_DataTable_DataTable Opt.

model: ServiceCalendar[];
ngOnInit() {
let lastPage=0;  
let lastSearchText="";
this.dtOptions = {
      language:lang,
      pagingType: 'full_numbers',
      pageLength: 10,
      displayStart:lastPage, // Last Selected Page
      search:{search:lastSearchText}, // Last Search Text
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        lastPage=dataTablesParameters.start;  // Note :  dataTablesParameters.start = page count * table length
        lastSearchText=dataTablesParameters.search.value;
        this.serviceCalendarService.getPanelServiceCalendar(dataTablesParameters).then((resp)=>{
          this.model = resp.data;
            callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsTotal,
            data:[]
          });
      });
      },
      autoWidth:false,
      ordering:true,
      lengthMenu:['5','10','20'],
      columns: [{ data: 'id' }, { data: 'serviceName' }, { data: 'dateCreated' }]
    };
 }

Angular_DataTable_language Opt.

 let lang={
      "sProcessing":     "sProcessing",
      "sSearch":         "sSearch :",
      "sLengthMenu":     "sLengthMenu  _MENU_ ",
      "sInfo":           "sInfo _START_ to _END_ of _TOTAL_",
      "sInfoEmpty":      "sInfoEmpty",
      "sInfoFiltered":   "(sInfoFiltered _MAX_  total)",
      "sInfoPostFix":    "",
      "sLoadingRecords": "sLoadingRecords...",
      "sZeroRecords":    "sZeroRecords",
      "sEmptyTable":     "sEmptyTable",
      "oPaginate": {
          "sFirst":      "sFirst",
          "sPrevious":   "sPrevious",
          "sNext":       "sNext",
          "sLast":       "sLast"
      },
      "oAria": {
          "sSortAscending":  ": sSortAscending",
          "sSortDescending": ": sSortDescending"
      },
    }

angular_response.ts

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

Hello,

Thank you for this nice implementation, but i see you used it for only the post http method in your service. Every online implementation of server side processing datatable only uses post.

Does it work for only post? or can I also use it for get?