Responsive Datatable with server-side pagination in angular 6

komalshah1987

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

colin

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

komalshah1987

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.

kthorngren

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

komalshah1987

Hi @kthorngen

It does not work when data is being derived from ajax called.
For a zero configuration datatable this extension work fine.

colin

Thread repeated here.

colin

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

allan

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

komalshah1987

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

allan

Can you please elaborate how to load data into datatable directly.

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

Srinivas.teella

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.

allan

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

Srinivas.teella

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.

mananptl307

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.

geethunimesh

Same issue. Any solution for this?

colin

Have you tried Allan's suggestion above?

Colin

geethunimesh

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

colin

Excellent, thanks for reporting back,

Colin