Visible false column display when loading page

charan

i am

var oTable = $(tblId).DataTable({
"columnDefs": [
{ "visible": false, "targets": 10 }
],
"order": [[10, "desc"]],
"bDestroy": true,
"responsive": true,
"serverSide": true,
"pageLength": 50,
"bLengthChange": false,
"dom": '<"pull-left"f><"pull-right"l>tip',
"dom": '<"top"flp>rt <"bottom"i><"clear"> ',
//"dom": '<"wrapper"flipt>',
"sPaginationType": "simple",
"oLanguage": {
"oPaginate": {
"sFirst": "",
"sNext": "<i class='fa fa-angle-right'></i>",
"sPrevious": "<i class='fa fa-angle-left'></i>",
"sLast": ""
},
"sInfo": "Pg PAGE of PAGES"
},
"bLengthChange": false,
"ajax": $.fn.dataTable.pipeline({
url: "@Url.Action("GetDetails"),
pages: 1 // number of pages to cache
}),
//"order": [["8", "desc"]],
"fnInitComplete": function (oSettings, json) {
if (json.recordsTotal == 0) {
//debugger;
$('#tbl').html("Pg 0 of 0");
}

        },
        "columns": [

        { "data": "column1" },
        { "data": "column2" },
        {
            "data": "column3", "render": function (data, type, row) {
                return "<span>$ " + data + "</span>"
            }
        },
          {
              "data": "column4", "render": function (data, type, row) {
                  return "<span>$ " + data + "</span>"
              }
          },
          {
              "data": "column5", "render": function (data, type, row) {
                  return "<span>$ " + data + "</span>"
              }
          },
          {
              "data": "column6", "render": function (data, type, row) {
                  return "<span>$ " + data + "</span>"
              }
          },
          {
              "data": "column7", "render": function (data, type, row) {
                  return "<span>$ " + data + "</span>"
              }
          },
         {
             "data": "column8", "render": function (data, type, row) {
                 return "<span>$ " + data + "</span>"
             }
         },
        { "data": "column9" },
        {
            "data": "Status", "render": function (data, type, row) {
                if (row.Status == 'Distributed' || row.Status == 'InProgress') {
                    return "<a href='javascript:void(0)' onclick='fnloadmore(" + row.OrderID + ",this);'> <img src='/assets/images/right_arrow.png' alt='Edit' width='10px'/> </a>";
                }
                else {
                    return "<a href='javascript:void(0)' > <img src='/assets/images/right_arrow.png' alt='Edit' width='10px'/> </a>";
                }
            },
            'bSortable': false,
        },
        { "data": "CreatedOn", "visible": false, },
        ],
    });

above is my datatable code, there is a column at "CreatedOn" which is visible false, but when page loading or at refresh of the page it displays that column and then it goes visible false. can you please give me any idea where to bind data.