Search code examples
javascriptjquerydatatablefont-awesome

Using font-awesome in fnCreatedCell

Recently learned a new way to use data-attributes within a datatable.

Previously, I would code the columns in this manner (please note the font-awesome tags):

 "columns": [{ 
    "data": "",
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
    {
      $(nTd).html("<a href='#' title='Edit Account' class='modAccount' 
      data-voyid='"+oData.VOYID+"' data-servicename='"+oData.SERVICE_NAME+"' 
      data-vesselname='"+oData.VESSEL_NAME+"' data-voyage='"+oData.VOYAGE+"' 
      data-bound='"+oData.BOUND+"' data-cargoweek='"+oData.CARGO_WEEK+"' 
      data-cargoyear='"+oData.CARGO_YEAR+"' data-allocation='"+oData.ALLOCATION+"' 
      data-importvoyage='"+oData.IMPORT_VOYAGE+"' data-adddate='"+oData.ADD_DATE+"' 
      data-adduser='"+oData.ADD_USER+"' data-moddate='"+oData.MOD_DATE+"' 
      data-moduser='"+oData.MOD_USER+"'><i class='fa fa-edit fa-fw'> </i></a>");
    },

The method I just learned follows this format:

"columns": [{ 
    "data": "",
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
    {
       $('<a />', {
       'href': '#',
       'title': 'Edit Account',
       'class': 'modAccount',
       'data-voyid': oData.VOYID,
       'data-servicename': oData.SERVICE_NAME,
       'data-vesselname': oData.VESSEL_NAME,
       'data-voyage': oData.VOYAGE,
       'data-bound': oData.BOUND,
       'data-cargoweek': oData.CARGO_WEEK,
       'data-cargoyear': oData.CARGO_YEAR,
       'data-allocation': oData.ALLOCATION,
       'data-importvoyage': oData.IMPORT_VOYAGE,
       'data-adddate': oData.ADD_DATE,
       'data-adduser': oData.ADD_USER,
       'data-moddate': oData.MOD_DATE,
       'data-moduser': oData.MOD_USER,
       'text': '<i class="fa fa-edit fa-fw"> </i>' <-- does not work
       }).appendTo(nTd);
     }
   },

I had no problem bringing in the font-awesome icon with the first piece of code.

The second piece of code is where I need the icons now.

In the 'text' section in the second piece of code, I tried to pull in the font-awesome icons there. But on screen, I only see the code, not the icon.

How can I fix this to include the font-awesome icons?

Solution

  • You're adding HTML so you supply the string to the html property, instead of text in the object initialiser:

    'html': '<i class="fa fa-edit fa-fw"> </i>'