Responsive Datatable with server-side pagination in angular 6
Responsive Datatable with server-side pagination in angular 6
komalshah1987
Posts: 5Questions: 2Answers: 0
Hi
I am trying to make jquery datatable responsive in angular 6
by using responsive:true in below configuration, but the table does not become responsive.
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2,
serverSide: true,
processing: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'https://angular-datatables-demo-server.herokuapp.com/',
dataTablesParameters, {}
).subscribe(resp => {
that.persons = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
responsive:true,
columns: [{ data: 'id' }, { data: 'firstName' }, { data: 'lastName' }]
};
Can anyone help
Answers
Hi @komalshah1987 ,
Yep, that should work, provided you've include the JS+CSS files (see this page here for the files you need). If no joy, 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
Hi Colin,
Thanks for the prompt reply.
Can I provide link to stackblitz.com?As i have already created one .
I am providing the link here for stackblitz:- https://stackblitz.com/edit/responsive-server-side-1264
Let me know if this doesnt work for you.
I'm not familiar with Angular but maybe these docs will help to include Responsive:
https://l-lin.github.io/angular-datatables/#/extensions/responsive
Kevin
Hi @kthorngen
It does not work when data is being derived from ajax called.
For a zero configuration datatable this extension work fine.
Thread repeated here.
Hi @komalshah1987 ,
Responsive doesn't care if the data is local of comes from Ajax - see example here. It does seem that Responsive is loading - I can't get it triggering as the container seems to be fixed width. We'll have a look and report back,
Cheers,
Colin
I actually just replied to you by e-mail about this, not being aware that you'd post the same question here.
What is happening here is that the
ngFor
is actually overruling DataTables' Responsive component. If you load the data directly into DataTables then it works as expected.The issue is that you have two different things trying to control the table's DOM - Angular's ngFor and DataTables.
Allan
Hi @colin,
The example you have shared is loading the entire data async from a txt file.
I have implemented server-side pagination which is different from the example you have shared.?
Hi @allan
We would require ngFor as we are iterating over a list of object.
Can you please elaborate how to load data into datatable directly.
Komal
You could build a Javascript array as shown in this example. Your ngFor (presumably) could be used for that, so that you don't have two different libraries trying to control the same DOM elements. That will never work.
Allan
Hi @allan, I am trying to implement a responsive data table in angular using typescript. I wonder how to achieve this functionality with HTTP.get method?
Also, I would want to move this HTTP call part to the service file.
I appreciate your guidance on this.
I'm afraid I'm not well versed in Angular at all - if you can make an Ajax call using Angular and get JSON back then you could use the
ajax
option as a function (where the function will make that Ajax call, rather than letting jQuery do it) - but how you do that in Angular, I'm afraid you'd need to ask in an Angular forum or SO.Allan
Hi @allan. Thanks for your response. Its the same as the above code. But I want to make http.get instead of http.post. I found something here https://stackoverflow.com/questions/54144542/server-side-ajax-configuration-for-angular-datatables-for-get-request. Need to try it out.
Does anyone got any solution on above issue? I am trying to do it in angular and I am unable to treat my datatable as responsive in serverside grid case. Thanks for the help in advance.
Same issue. Any solution for this?
Have you tried Allan's suggestion above?
Colin
Understood what Allen said.
'The issue is that you have two different things trying to control the table's DOM - Angular's ngFor and DataTables.'
Updated this as -
get data via API call first and then used it to draw data table
Now working fine
Thank you
Excellent, thanks for reporting back,
Colin