Datatables Not making Ajax call Angular 12 Server-Side

sdb

Hello everyone,
I'm using datatables with my angular 12 project but the ajax call is not done to the server.

The code from my ts component is below:

  @ViewChild(DataTableDirective, { static: false })
  datatableElement: DataTableDirective;
  dtInstance: DataTables.Api;

  dtOptions: any = {};

  constructor(.....) {}

  ngOnInit(): void{

    const that = this;
    this.dtOptions = {
      pagingType: 'full_numbers',
      select: true,
      colReorder:true,
      processing: true,
      serverSide: true,
      language: DatatableLanguage.datatableFrench,
      dom: 'Bfrtip',
      ajax:  {
           url: this.urlService+'/search',
           type: 'POST',
           contentType: 'application/json',
           dataFilter:(resp)=>{
             let json = JSON.parse( resp );
              json.recordsTotal = json.totalElements;
              json.recordsFiltered = json.total;
               json.data = json.content;
               this.data = json.content;
                console.log('The received data from server: ',resp);
                return JSON.stringify( json ); // return JSON string
           },
          dataSrc(parametersMap) {
            console.log('The parametersMap before sending to server : ',parametersMap);
            return {pageable: this.pageable};
          },
          success: (response)=> {
            console.log('response from response: ',response);
          },
          error: (error)=>{
            console.log('error from error: ',error);
          }
       },
       buttons: [
         'colvis',
         'print',
         'excel',
         'csv',
       ],
      columns: [
        //my columns
      ],
      deferRender: true,
       responsive: true,
       columnDefs: [
         { orderable: false, targets: 0,
           searchable: false}
       ],
     };
  }

The table definition from the html is like this:

<table  id="tableId" datatable [dtOptions]="dtOptions"  class="display" >

I have verified the number of columns from thead, tbody and tfoot there is the same number of columns.
There no error displayed also.

Thank you in advance for your help.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

As mention in ajax, success "must not be overridden as it is used internally in DataTables". Try removing that and see if that helps,

Colin

sdb

Hello Colin,
Your solution helped but i had another typo in my html file.
Now I have another problem with individual column searching with the following code inside the intiComplete method.

        initComplete: (settings, json) => {
          
          settings.aoColumns.every(function(currentColumn, columnIndex) {
            const that = this;
            $( 'input', this.footer()).on( 'keydown', function(ev) {
                 if (ev.keyCode == 13) { //only on enter keypress (code 13)

                  that.search(this.value).draw();
                 }
            });
        } );
        },

I'm getting the following error from the browser :
core.js:6456 ERROR TypeError: Cannot read properties of undefined (reading 'search')
at HTMLInputElement.<anonymous> (clientprofiletest-grid.component.ts:1077:24)
at HTMLInputElement.dispatch (..\node_modules\jquery\dist\jquery.js:5430:1)
at HTMLInputElement.elemData.handle (..\node_modules\jquery\dist\jquery.js:5234:1)
at ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.js:28661:1)
at ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
at invokeTask (zone.js:1600:1)
at HTMLInputElement.globalZoneAwareCallback (zone.js:1626:1)

I don't know what I'm doing wrong.

Regards,

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

At a glance that looks OK. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

I suspect settings.aoColumns is not returning an instance of the API which you need for that.search(this.value). You will want to do something more like this example.

Kevin