Add css class to dynatable columns

[maysamsh]

I'm trying to add a class name to dynatable generated <td>s, but I don't know how. I've tried this, but does not work:

<table id="my-final-table">
  <thead>
    <th>Band</th>
    <th>Song</th>
      <th style="display:none;" class="td-id">id</th>
  </thead>
  <tbody>
  </tbody>
</table>

I want to add td-id to the last <td>.

var jsondata=[
  {
    "band": "Weezer",
    "song": "El Scorcho",
      "id":1
  },
  {
    "band": "Chevelle",
    "song": "Family System",
      "id":2
  }
];

var processingComplete = function(){
    $('#my-final-table tr').on("click",function(){
        console.log($(this));
});
};
$('#my-final-table').dynatable({
  dataset: {
    records: jsondata
  }
}).bind('dynatable:afterProcess', processingComplete);

processingComplete();

But the row html is like this when I click on a row:

<td style="text-align: center;">Chevelle</td>
<td style="text-align: center;">Family System</td>
<td style="display: none;text-align: start;">2</td>

JSFiddle: http://jsfiddle.net/maysamsh/pDVvx/5/

[Virakal]

Using copyHeaderClass should do it, if I'm understanding correctly. Like:

dataset: {
    records: jsondata
  }, table: {
      copyHeaderClass: true
  }

[JangoSteve]

@Virakal is right. See this updated jsfiddle: http://jsfiddle.net/pDVvx/7/

[Mewit]

I have what I think is a related question.. I'm trying to hide certain columns of the table with jquery. The columns to hide or show are defined by the class of the <td>. I use this javascript to hide the columns:

function hideCol(columnClass){
      $('table .'+columnClass).each(function(index) {
        $(this).hide();
      });

      $('ul#hiddenCols').append('<li id="'+columnClass+'"><a href="javascript:;" onclick="showCol(\''+columnClass+'\');">Show '+columnClass+'</a></li>');
    }

function showCol(columnClass){
  $('table .'+columnClass).each(function(index) {
    $(this).show();
  });

  $('li#'+columnClass).remove();
    }

For example I hide columns on load like this:

$(document).ready(function() {
    hideCol("Group2");
    hideCol("Group3");
    hideCol("Group4");
});

And I have buttons on the page to switch which columns are displayed.

However, if I set the classes of the table headers appropriately and copyHeaderClass: true as above, it doesn't seem to work. The headers change when I click the buttons to hide columns, but the <td>s don't, they just remain frozen on "Group1"s (which I guess means it's running when called with $(document).ready but not after).

I think I'm doing the copyHeaderClass thing correctly, here's my script:

$.getJSON('/jsontable?term={{Title}}', function (response) {
  $('#my-final-table').dynatable({
  dataset: {
    records: response
  },
  table: {
       copyHeaderClass: true
       }

});
});

Thanks a lot! Alex

[JangoSteve]

@Mewit So after running dynatable, do the <td> elements just not have the same class as the <th> element for that column?

[maysamsh]

@Mewit To hide a column just add display:none to header th.

[maysamsh]

@Virakal Thanks, that was what I wanted.

[Mewit]

@JangoSteve mm I'm not sure, when I view source I just see the Javascript. Is there a way to tell?

@maysamsh Thanks, but then how do I show it again when I click the appropriate button?

[maysamsh]

@Mewit if you are using @Virakal's method, just use something like this for your button:

$("#my-button").on("click",function(){
$(".my-class").show();
});

[Mewit]

@maysamsh When I do that it does the same thing as it was doing before - the column headers change but the actual columns don't. It doesn't seem to be setting the class names in the columns to be the same as the header, because when I reverse it and say "hide class2" or whatever, it hides the headers but not the columns.

Everything you're saying makes sense, and it works in jsfiddle, just not mine. Could other scripts be interfering with it somehow? I will try to test that.

[Mewit]

Problem seems to have been that I was using a different version of dynatables. I switched it to use this and it started working as expected. Thanks for the help guys.

[hay-wire]

It's no more working in the current version 1.7.0. How do I achieve it in the current version?

[ProxiBlue]

+1 - Yes, the functionality / option for copyHeaderClass is no longer listed...so how in latest?

[ProxiBlue]

@hay-wire

ref: https://github.com/alfajango/jquery-dynatable/issues/300