Responsive Datatable with server-side pagination in angular 6

Responsive Datatable with server-side pagination in angular 6

komalshah1987komalshah1987 Posts: 5Questions: 2Answers: 0
edited April 2019 in Free community support

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • komalshah1987komalshah1987 Posts: 5Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2019

    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

  • komalshah1987komalshah1987 Posts: 5Questions: 2Answers: 0

    Hi @kthorngen

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thread repeated here.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • komalshah1987komalshah1987 Posts: 5Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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.teellaSrinivas.teella Posts: 3Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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.teellaSrinivas.teella Posts: 3Questions: 1Answers: 0

    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.

  • mananptl307mananptl307 Posts: 1Questions: 0Answers: 0

    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. :)

  • geethunimeshgeethunimesh Posts: 25Questions: 9Answers: 0

    Same issue. Any solution for this?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Have you tried Allan's suggestion above?

    Colin

  • geethunimeshgeethunimesh Posts: 25Questions: 9Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Excellent, thanks for reporting back,

    Colin

Sign In or Register to comment.