How limit jquery data Table field from showing all column in MVC view

Question

I am using jquery DataTable in this link to create a grid in MVC to show some data and show and hide the column.

https://datatables.net/examples/api/show_hide.html

I am showing all the column and then show and hide base on what column user choose. But I like to show just 5 column at beginning in my grid instead of all column and user able to show/ hide the rest.

I am not sure how to do that.

This is my code:

this is jquery code to show/hide the column:

   $(document).ready(function () {

        var table = $('#DataLegal').DataTable({
          "paging": true
        });
        $('a.toggle-vis').on('click', function (e) {
                       event.preventDefault ? event.preventDefault() : event.returnValue = false;

            //Get the column API object
            var column = table.column($(this).attr('data-column'));

            // Toggle the visibility
            column.visible(!column.visible());

        });

        var ms = $('#magicsuggest').magicSuggest({
            // Converts our C# object in a JSON string.
            data: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(columns))
        });

        $(ms).on('selectionchange', function(e,m){

            // Turn on ALL columns... Like a reset...
            $.each(table.columns()[0], function(index) {
                table.column(index).visible(true);
            });

            // Turn off each column in the value array... Value = int[0, 1, 2, ...]
            $.each(this.getValue(), function(index, item) {
                table.column(item).visible(false);
            });


        });

    });

and this is my grid that is showing all the column. I like to limit this at first show only 5 column:

 //This is when user sees the column name to show/hide
 <div id="content">

    <table>
        <tr>

        <td>
             <div id="magicsuggest"></div>


        </td>
        <td id="returnS5"></td>
    </tr>

    </table>
    </div>

 //This is the grid that I have all the column and I like to limit it to 5 column
<br />
 <table width="100%" class="display" id="DataLegal" cellspacing="0">
    <thead>
        <tr>
            <th>Entity</th>how hide some column 
            <th>License Type</th>
            <th>State</th>
            <th>Location</th>
            <th>Data User</th>
            <th>Create Date</th>
            <th>Modified Date</th>
            <th>Modified By</th>
            <th>Status</th>
            <th>Surrender Effective Date</th>
            <th>NMLS</th>
            <th>License Name</th>
            <th>License Number</th>
            <th>Issuance Date</th>
            <th>Expiration Date</th>
            <th>License Renewal Due Date</th>
            <th>License Renewal Fee</th>
            <th>License Renewal Filed Date</th>
            <th>Annual Report Due Date</th>
            <th>Annual Report Filed Date</th>
            <th>Other Filed Date</th>
            <th>Display</th>
            <th>Display Comments</th>
            <th>Regulator</th>
            <th>Governing Law</th>
            <th>Regulator Address</th>
            <th>License Restrictions</th>
            <th>Additional Notes</th>


        </tr>
    </thead>
    <tbody>
    @foreach(var item in Model)
    {
    <tr>
    <td>@item.Entity</td>
    <td>@item.License_Type</td>
    <td>@item.State</td>
    <td>@item.Location</td>
    <td>@item.dataUser</td>
    <td>@item.Create_Date</td>
    <td>@item.Modified_Date</td>
    <td>@item.Modified_By</td>
    <td>@item.Status</td>
    <td>@item.Surrender_Effective_Date</td>
    <td>@item.NMLS</td>
    <td>@item.License_Name</td>
    <td>@item.License_Number</td>
    <td>@item.Issuance_Date</td>
    <td>@item.Expiration_Date</td>
    <td>@item.License_Renewal_Due_Date</td>
    <td>@item.License_Renewal_Fee</td>
    <td>@item.License_Renewal_Filed_Date</td>
    <td>@item.Annual_Report_Due_Date</td>
    <td>@item.Annual_Report_Filed_Date</td>
    <td>@item.Other_Filed_Date</td>
    <td>@item.Display</td>
    <td>@item.Display_Comments</td>
    <td>@item.Regulator</td>
    <td>@item.Governing_Law</td>
    <td>@item.Regulator_Address</td>
    <td>@item.License_Restrictions</td>
    <td>@item.Additional_Notes</td>


   </tr>

}
    </tbody>

</table>

Answer 1

The initial visibility of columns is an initialization option which can be set in the columnDefs property. Example:

    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        }]

Reference:

Hidden Columns