CODEWITHSUNDEEP
javascriptjquerydatatableshide
John Beasley
John Beasley

Reputation: 3081

jquery datatable hiding icon within the table

I am working on an inline editing feature. I want to show a green check in a column cell to indicate that the record was updated. But first, I need to initially hide it.

Here is what it currently looks like:

enter image description here

As you can see, the checkmark currently appears once the datatable is displayed.

I need to hide that green check.

In my javascript file, I start out by trying to hide the ID in reference.

$('#testID').hide();

I have a function that creates the datatable (I did not include the event handler that call the function and sends the variable - if needed, let me know):

function displayRecords(salesRepSelectVal)
{
  var data = {
    salesRepSelectVal: {salesRepSelectVal}
  }

  $.ajax({
    url: 'api/massEditorSummary.php',
    type: 'POST',
    data: data,
    dataType: 'html',
    success: function(data, textStatus, jqXHR)
    {
      var jsonObject = $.parseJSON(data); 
      var table = $('#example1').DataTable({
        "data": jsonObject,
        "columns": [
            { "data": "service" },
            { "data": "sales_area" },
            {
              "data": "forecast",
              "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
              {
                $(nTd).html("<input type='text' class='form-control 
                editForecast' id='editForecast' data-uid='"+oData.UID+"' 
                data-editforecast='"+oData.forecast+"' value='"+oData.forecast+"' />
                <span id='testID'>
                <i class='fa fa-check' id='updatedIcon' aria-hidden='true' style='color:green;'> </i>
                </span>");
              }
            },
            { "data": "trade_lane" },
            // few more columns
        ],
        "paging": false,
        "scrollY": 550,
        "scrollX": true,
        "bDestroy": true,
        "stateSave": true,
        "autoWidth": false  
      });   
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      // some error stuff
    }
  });
}

If you'll notice in the SUCCESS portion of the ajax call, there is a column with a SPAN with an ID called testID. This is the ID that I'm trying to hide once the Datatable is generated.

I tried to place $('#testID').hide(); within the function. I tried to place it within the SUCCESS portion. I'm not sure where else I can place it to hide that ID.

What can I do to make this work, if it's even possible?

Upvotes: 0

Views: 662

Answers (1)

Negi Rox
Negi Rox

Reputation: 3932

add display:none; in this line like below.

<span id='testID_'+oData.UID style='display:none'>
            <i class='fa fa-check' id='updatedIcon_'+oData.UID aria-hidden='true' style='color:green;'> </i>
            </span>

Upvotes: 1

Related Questions