DataTables Responsive plug-in

DataTables Responsive plug-in

ishaksiishaksi Posts: 10Questions: 2Answers: 0

Hello fellow programmers,

I have a DataTable that I want to be responsive(tried DataTables responsive plug-in). The problem is that it is not working correctly. First of all it shows all columns in the table(even if they are hidden in the javascript) the second problem is that when I resize the browser window nothing happens but the whole browser "lags" and then starts responding so I suppose the javascript is corrupted or something. I tried the multiple way of making the table response, in the javascript, in the html and with a custom method new $.fn.dataTable.Responsive( table, {
details: false
} );

But none of this is working correctly. Anyone got a solution for this?

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
  • ishaksiishaksi Posts: 10Questions: 2Answers: 0

    Okay, I can begin with this. Why is not the responsive working here?

    http://live.datatables.net/huwipevi/2/edit

  • allanallan Posts: 63,252Questions: 1Answers: 10,420 Site admin
    div.container {
      min-width: 980px;
      margin: 0 auto;
    }
    

    In the CSS. Remove that and it does work.

    Allan

  • ishaksiishaksi Posts: 10Questions: 2Answers: 0

    I still cant get it to work in my code. I have data from a ajax-source. Is there any situation where the responsive plug-in is not compatible? So annoying.

  • allanallan Posts: 63,252Questions: 1Answers: 10,420 Site admin

    Not as far as I am aware - this example shows an Ajax loaded data source.

    We would need a link to a page showing the issue to be able to offer any help resolving the issue, since, as you can see, it works in the demos.

    Allan

  • ishaksiishaksi Posts: 10Questions: 2Answers: 0
    edited May 2015

    I updated my code in the JSbin:

    http://live.datatables.net/huwipevi/5/edit

    I have my DataTable-build in an ajax-request(

    $.ajax({
    url: 'wherethedatacomesfrom',
    type : 'GET',
    dataType : 'json',
    success: function(data)
    {
     
      Here I build the table with the code that i provided with above. something here goes wrong.  
     
    }
    
    
    })
    
  • allanallan Posts: 63,252Questions: 1Answers: 10,420 Site admin

    As best I can tell, the example you provided appears to work okay - it is responsive for me in Chrome Mac. Does it not work for you?

    Allan

  • ishaksiishaksi Posts: 10Questions: 2Answers: 0

    Hello again, I solved it after lots of testing...

    The table was inside a class"row" with boostrap. And there was 3 grids with 4 columns. And the table was not inside none of them.

This discussion has been closed.