InitComplete - show/hide/remove tags

Akashvino

Hi All,
Request your help in the below code, if we added this code "$('span.blink').remove();" in the initComplete function then the line " table.columns( [ 2, 3 ] ).visible( false );" is not working, When we load the page for first time the display of the table is correct as below "Initial" after we select another option form the dropdown menu, then the dispaly is incorrect as below "Next Options", please find the entire code below tried the procedure in the link "https://datatables.net/reference/option/initComplete"

Initial (Correct)
Name--------------- Rack
Server1--------------- R23

Next Options( Incorrect)
Name--------------- Rack
R23------------------ BLD123

Code

<script type="text/javascript">
$(document).ready(function(){
        $("#Srvlist").bind('change init', function(){
        $('#Server').toggle($("#Srvlist option").is(':selected'));
        var rvalue = this.value;
    var surl = '/Serverlist/' + rvalue;

    $('#Server').append('<caption id="Cpt">Test</caption>');
    $('<span class="blink">(Processing...  <i class="fa fa-refresh fa-spin fa-xs"></i>)</span>').appendTo('caption');

    var table = $("#Server").DataTable({
            destroy: true,
            saveState: true,
            ajax: {
                    url: surl,
                    dataSrc: "",
                    method: "GET",
                    xhrFields: { withCredentials: true }
                  },
            language: { zeroRecords: "No records found", emptyTable: "No records available" },
            columns: [
                        { data: "name", className: "text-sm-center h8 px-0" },
                        { data: "rack", className: "dt-body-left h8 px-0" },
                        { data: "location", className: "text-sm-center h8 px-0" },
            { data: "serial", className: "text-sm-center h8 px-0" }
            ],
            orderCellsTop: true,
            fixedHeader: false,
            filter: false,
            searching: true,
            info: false,
            pageResize: true,
            paging: true,
            PaginationType: "scrolling",
            scrollX: true,
            scrollY: 300,
            scrollCollapse: false,
            scroller: { loadingIndicator: true, displayBuffer: 20 },
            deferRender: true,
            colReorder: true,
            keys: true,
            responsive: false,
            select: true,
            lengthChange: true,
            initComplete: function(settings, json) {
                          $('span.blink').remove();
                          pcnt = table.column( 3 ).data().unique().count(); $('#Cpt').append( '(Total : '+ pcnt + ')');
           }

        });
        table.columns( [ 2, 3 ] ).visible( false );
    }).trigger('init');
});
</script>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Why don't you use the columns.visible option to hide the columns?

But as Colin said we will need to see a running example to understand what the code is doing.

Kevin

Akashvino

Hi All,

Thank you very much, was able to resolve the issue