Responsive Table

Responsive table with checkbox hide / show option for row col

by rupesx

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div id="sortJS">
      <!--   Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column="2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column="5">Salary</a> -->
    </div>
    <div id="sort">

    </div>

    <table id="tblData" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr class="reportHeaders" role="row">
          <th class="sorting" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 109px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Tix Price (Rs.): activate to sort column ascending">
            <div class="dataTables_sizing">Tix Price (Rs.)</div>
          </th>
          <th class="sorting" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 94px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Capacity(A): activate to sort column ascending">
            <div class="dataTables_sizing">Capacity(A)</div>
          </th>
          <th class="sorting" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 108px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Killed Seat(B): activate to sort column ascending">
            <div class="dataTables_sizing">Killed Seat(B)</div>
          </th>
          <th class="sorting" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 261px; padding-top: 0px;...

CSS

#sort {
   display: block;
 }
 /* Smartphones (portrait and landscape) ----------- */
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
 /* iPads (portrait and landscape) ----------- */
 
 @media only screen and (min-width: 320px) and (max-width: 1024px) {
   .odd td:nth-child(1):before,
   .even td:nth-child(1):before {
     color: #ef5350;
   }
   .odd td:nth-child(2):before,
   .even td:nth-child(2):before {
     color: #f06292;
   }
   .odd td:nth-child(3):before,
   .even td:nth-child(3):before {
     color: #ba68c8;
   }
   .odd td:nth-child(4):before,
   .even td:nth-child(4):before {
     color: #f44336;
   }
   .odd td:nth-child(5):before,
   .even td:nth-child(5):before {
     color: #d81b60;
   }
   .odd td:nth-child(6):before,
   .even td:nth-child(6):before {
     color: #8e24aa;
   }
   .odd td:nth-child(7):before,
   .even td:nth-child(7):before {
     color: #5e35b1;
   }
   .odd td:nth-child(8):before,
   .even td:nth-child(8):before {
     color: #3949ab;
   }
   .odd td:nth-child(9):before,
   .even td:nth-child(9):before {
     color: #1e88e5;
   }
   .odd td:nth-child(10):before,
   .even td:nth-child(10):before {
     color: #00838f;
   }
   .odd td:nth-child(11):before,
   .even td:nth-child(11):before {
     color: #004d40;
   }
   .odd td:nth-child(12):before,
   .even td:nth-child(12):before {
     color: #0091ea;
   }
   .odd td:nth-child(13):before,
   .even td:nth-child(13):before {
     color: #827717;
   }
   .odd td:nth-child(14):before,
   .even td:nth-child(14):before {
     color: #e65100;
   }
   .odd td:nth-child(15):before,
   .even td:nth-child(15):before {
     color: #3e2723;
   }
   .odd,
   .even {
     margin: 0 0 20px;
     float: left;
     width: 100%;
   }
   .reportAppend td {
     width: 100%;
     float: left;
     padding-left: 50%;
     position: relative;
   }
   thead {
     display: none;
   }
   .reportAppend td:before {
     position: absolute;
     top: 11px;
     left:...

JavaScript

$(document).ready(function() {

  //Add data attribute to td
  addDatath('.reportHeaders', '.reportAppend tr');
  change('#sort input', '#tblData tr');
});



var change = function(elemParent, elemData) {
  $(elemParent).on('change', function() {
    var checked = $(this).is(":checked");
    var index = $(this).val();
    $(elemData).each(function() {
      if (checked) {
        $(this).find("td").eq(index).show();
        $(this).find("th").eq(index).show();
      } else {
        $(this).find("td").eq(index).hide();
        $(this).find("th").eq(index).hide();
      }
    });
  });
}
var addDatath = function(mainTbl, mainBodyTr) {
  $(mainTbl).each(function() {
    var i, len, j, h;
    var arrayOfThisRow = [];
    var arrayOfThisHead = [];
    var u = $('<ul/>', {
      class: 'dropdown-menu'
    });
    var dropWrap = $('<div />', {
      class: 'dropdown'
    });
    var dropButton = $('<button/>', {
      class: 'btn btn-primary dropdown-toggle',
      type: 'button',
      text: 'Select Option'
    });
    $(dropButton).attr('data-toggle', 'dropdown');
    var dropIcon = $('<span/>', {
      class: 'caret'
    });
    var tableData = $(this).find('.dataTables_sizing');
    if (tableData.length > 0) {
      tableData.each(function() {
        arrayOfThisRow.push($(this).text());
      });
      var rows = $(mainBodyTr);
      for (j = 0; j < rows.length; j++) {
        for (i = 0, len = arrayOfThisRow.length; i < len; i++) {
          $(rows).eq(j).find('td').eq(i).attr('data-title', arrayOfThisRow[i]);
        }
      }
      var ths = document.getElementsByTagName('th');
      tableData.each(function() {
        arrayOfThisHead.push($(this).text());
      });
      for (h = 0, len = arrayOfThisHead.length; h < len; h++) {
        var l = $('<li/>');
        var la = $('<label />');
        var span = $('<span/>', {
          text: arrayOfThisHead[h]
        });
        var In = $('<input />', {
          type: 'checkbox',
          checked: 'checked',
  ...