Datatables Not making Ajax call Angular 12 Server-Side
Datatables Not making Ajax call Angular 12 Server-Side
sdb
Posts: 2Questions: 1Answers: 0
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.
Answers
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
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.
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,
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
I suspect
settings.aoColumnsis not returning an instance of the API which you need forthat.search(this.value). You will want to do something more like this example.Kevin