DataTable; adding icon to select rows

问题:

I have specific columns in rows where I want to add images to the left of the text. This person (jQuery DataTables add country icons each column) had the exact same problem. He wanted to add flags icon to the left of the text within a cell; I want to do basically the same thing (but no flag icons). If every column was going to have an image I would just create another row within the table, but some columns should not have icons so that isn't really an option in this case.

So far in my datatable options I'm doing the following:

  options = {
    "createdRow": function(row, data, index){
      var sharedArray = scope.$eval(attrs.sharedData);
      var rowValue = data[1] + "_" + data[0];
      if ($.inArray(rowValue, sharedArray) != -1){
        $('td', row).eq(0).addClass('shared');
      }
    }

At this point I initially thought to use css to add a background image to the .shared element but I ran into two problems, the most important of which it was impossible to add an event on hover if the background image was what was setting the icon.

I then tried to create a span before the row

$(row).prepend('<span class="shared-icon"></span>');

hoping to then add a background image and hover event to the span, but adding this within the TR caused huge spacing issues with the rows and their respective headers.

I figure I'm missing something relatively simple but have been stuck for a few hours now playing with different datatable functionalities. Thoughts?

回答1:

How about using fnCreatedCell option

Example

"fnCreatedCell": function (nTd, sData, oData, iRow, iCol){
  var sharedArray = scope.$eval(attrs.sharedData);
  var rowValue = oData[1] + "_" + oData[0];
  if ($.inArray(rowValue, sharedArray) != -1){
    $(nTd).addClass('shared');
  }
}

where nTd is the cell, sData is the cell data, oData is the row data, iRow is row index and iCol is the column index.

回答2:

I have no idea why my mind wasn't working before; I worked on this problem today and within ten minutes I had this working.

    "createdRow": function(row, data, index){
      var sharedArray = scope.$eval(attrs.sharedData);
      var rowValue = data[1] + "_" + data[0];
      if ($.inArray(rowValue, sharedArray) != -1){
        var data = $('td', row).eq(0).html();
        $('td', row).eq(0).html("<span class='glyphicon glyphicon-asterisk'></span>" + data);
      + data }