0

I am trying to dynamically change the order of <tr> I am wanting to do it via translateY in the css but tables do not seem to support this css.

Is there a way I can rearrage the tr order using CSS, I know there is a javascript plugin called datatables but I do not want to implement that in this project, sure it is possible to change the visible order of <tr> only with CSS or javascript? but not plugin?

my current attempt is looking like this:

arrangeAll: function () {
  var visible = [];
  var invisible = [];
  this.collection.each(function (project) {
    if (project.get('visible'))
      visible.push(project);
    else
      invisible.push(project);
  }, this);

  var barheight = $('tbody tr').height();
  var totalHeight = visible.length * barheight;

  $(visible).each(function (i, elt) {

    // find the matching  project line 
    var Ypos = i * barheight;
    var $bar = $('tr[data-id="' + elt.id + '"]');

    $bar.css({
      'top': Ypos + 'px',
      'opaticy': 1,
      'display': 'block',
      'position': 'absolute'
    });
  });

  $(invisible).each(function (i, elt) {

    // find the matching  project line 
    var $bar = $('.li-project-ontimeline[data-id="' + elt.id + '"]');

    $bar.css({
      'opaticy': 0
    });
  });
},
Jay
  • 1,688
  • 5
  • 20
  • 34
Udders
  • 6,914
  • 24
  • 102
  • 194
  • 7
    If you're already using javascript why don't you just rearrange the nodes in the DOM? – canon Jan 09 '15 at 13:57
  • This may help you http://stackoverflow.com/questions/27305268/sort-child-div-based-on-data-attribute/27305548#27305548 – plalx Jan 09 '15 at 13:58

0 Answers0