Vlad Radulescu February 2016

How to create a responsive table using offsetWidth?

I have an AngularJS application with a table and I want to obtain this scenario:

First: I want to a have a fluid table using the table bootstrap class;

Second: After some javascript changes in the table head (reconstruct the th) I want to obtain the same fluid table.

My code (UPDATED after reply post): Pen

Javascript

var app = angular.module("myApp",[]);

app.controller("MainCtrl",['$scope', function($scope){
  $scope.currentThWidth = [];
  $scope.convertedWidth = [];
  var helpArray = [];
  $scope.show = function(){
    $scope.reset();
    jQuery('.table').find('th').each(function(index,column){
      helpArray.push(column.offsetWidth);
      $scope.currentThWidth.push('th' + index + ': ' + ' ' + column.offsetWidth + 'px');
    });
  };
  $scope.convert = function(){
    $scope.show();
    for(i in helpArray){
      var temp = (helpArray[i]/(jQuery(window).width()))*100;
      // temp = Translate the offsetWidth in % according to the container's width
      $scope.convertedWidth.push('th' + i + ': ' + temp.toFixed(2) + '%');
      jQuery('table thead th:nth-child' + '(' + i + ')').css('width',temp.toFixed(2) + '%');
    }
  };
  $scope.reset = function(){
    $scope.currentThWidth = [];
    $scope.convertedWidth = [];
    helpArray = [];
    jQuery('table thead th').removeAttr('style');
  };
}]);

Question

Why don't I get the same width ? I don't have the same table display states. After I execute my javascript function the th width is smaller then the initial one. Why ?

Answers


Joel Almeida February 2016

You are not applying your calculations to all the th.

In your example, the last th never gets updated. I changed your for(i in helpArray) to a jQuery.each().

Like this :

jQuery('table thead th').each(function(i, tableHead) {
      $scope.convertedWidth.push('th' + i + ': ' + 
      (helpArray[i]/(jQuery(window).innerWidth()))*100 + '%');
      jQuery(this).css('width', helpArray[i] + '/' + 
      jQuery(window).innerWidth() + '*100%');
    }) 

If you notice I'm not using toFixed() because this will round the numbers and mess the amount of pixels the browser renders. So the best way will be using the natural browser calculation.

helpArray[i]/jQuery(window).innerWidth() + '*100%'

I let the css make the math due to each browser render in different ways.

The output will be something like this:

<th style="width: 100/1100 * 100%;">

And the full code:

var app = angular.module("myApp", []);

app.controller("MainCtrl", ['$scope',
  function($scope) {
    $scope.currentThWidth = [];
    $scope.convertedWidth = [];
    var helpArray = [];
    $scope.show = function() {
      $scope.reset();
      jQuery('.table').find('th').each(function(index, column) {
        helpArray.push(column.offsetWidth);
        $scope.currentThWidth.push('th' + index + ': ' + ' ' + column.offsetWidth + 'px');
      });
    };
    $scope.convert = function() {
      $scope.show();
      jQuery('table thead th').each(function(i, tableHead) {
        $scope.convertedWidth.push('th' + i + ': ' + (helpArray[i] / (jQuery(window).innerWidth())) * 100 + '%');
        jQuery(this).css('width', helpArray[i] + '/' + jQuery(window).innerWidth() + '* 

Post Status

Asked in February 2016
Viewed 3,245 times
Voted 12
Answered 1 times

Search




Leave an answer