Table responsive

typhon

Hello again,

I'm using two different tables in my view. One is for large and medium devices (PC, iPAD landscape) and one is for small devices. Now I came to Datatables and I want to use all the great features in both tables.

I'm working with MVC4 & Bootstrap.

My fist approach is like my current solution to having 2 tables and initialise both tables with

$('#table1').DataTables({...});

$('#table2').DataTables({...});

I'm showing and hiding the tables with:

<div class="visible-md visible-lg">
  <table id="table1" .....
</div>
<div class="hidden-md hidden-lg">
  <table id="table2" .....
</<div>

My fist (large) table is a table as usual.. but my second table only shows important data well formatted and contains the ability to open a link by clicking on a row (data-href attribute in combination to a java script).

Is there a better way to handle the different tables maybe in one

<

table> to prevent duplicate code? Also I think to call $().DataTables() twice is slower.

Thx a lot and BR

allan

The other option is to use the Responsive extension which can automatically hide columns based on the browser size.

Allan

typhon

I've seen the Responsive extension already. But I don't want to hide/show columns. On large devices I want to show all cols and on small it should only appear one "special formatted" column.

But I can achieve it with an seperate table. I thought there is maybe an better way.

Thx for response!