Render DataTable with different columns

Benjoe64

I have a table and based on item selected from a dropdown, a column is shown or hidden. I am using a datable but when the hidden column is selected, the datatable doesn't show. I want to show if an employee is an Administrator or not. If Administrator, show Number and Role else don't show the Admin number or Role. For some reasons, when the the Employee is not an Admin, the two columns(Admin Number and Admon Role) get hidden but the datatable doesn't show.
Below is my code portion.

           <table class="table table-striped" id="tableId">
            <thead>
           <tr>
           
                <th style="font-size: 8pt; font-family: verdana; FONT-WEIGHT: bold; COLOR: #666666;">Empployee ID</th>
                <th id="hide2" style="font-size: 8pt; font-family: verdana; FONT-WEIGHT: bold; COLOR: #666666;">Admin Number</th>
                <th id="hide" style="font-size: 8pt; font-family: verdana; FONT-WEIGHT: bold; COLOR: #666666;">Admon Role</th>
                <th style="font-size: 8pt; font-family: verdana; FONT-WEIGHT: bold; COLOR: #666666;">Empployee Name</th>
                <th style="font-size: 8pt; font-family: verdana; FONT-WEIGHT: bold; COLOR: #666666;">Empployee Number</th>
          </tr>
            </thead>
          <tbody>
              @foreach (var item in Model)
              {
              <td style=" word-wrap: break-word;">
                        @item.EmpployeeID
                    </td>
               @if (item.AdminNumber != null)
                    {
                        <td id="hideadmin">
                            @item.AdminNumber
                        </td>
                    }
                    @if (item.AdminRole!= null)
                    {
                        <td id="hideRole">
                            @item.AdminNumber
                        </td>
                    }
                    <td style="word-break: break-all" id="cdrlCount">
                        @item.EmpployeeName
                    </td>
                    <td style="word-break: break-all" id="cdrlCount">
                        @item.EmpployeeNumber
                    </td>
              }
      </tbody>
              <script type="text/javascript">
    $(document).ready(function () {
  
        const v = $('#hideadmin').html();
        const n = $('#hideRole').html();
        const number = $.trim(n);
        const name = $.trim(v);
        if (name === '') {
            $("#hide").hide();

        } else {
            $("#hide").show();
        }

        if (number === '') {
            $("#hide2").hide();

        } else {
            $("#hide2").show();
        }

    });

     


    $('#tableId').DataTable({
        destroy: true,
        paging: true,
        searching: true,
        sort: true,
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    });
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It might be easier to add that logic into DataTables - by using columnDefs and setting columns.visible. Before initialising the table, you can create a columns object to hide the columns you don't want to show - something like this.

If that doesn't help, 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

Benjoe64

Hi Thanks a lot.
I have got it working now by doing

$(document).ready(function () {

    const v = $('#hideadmin').html();
    const n = $('#hideRole').html();
    const number = $.trim(n);
    const name = $.trim(v);
    $('#tableId').DataTable({
        initComplete: function(settings) {
            var api = new $.fn.dataTable.Api( settings );

            if (name === '' && number === '') {
                api.columns([2,3]).visible(false);
            }
        }
    });



});