DataTable Using Tabs in Responsive pettern

DataTable Using Tabs in Responsive pettern

______________________________________
//Create Bundle for Datatable


 public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
bundles.Add(new ScriptBundle("~/bundles/datatable").Include(
                "~/plugins/datatables/jquery.dataTables.min.js",
                "~/plugins/datatables/dataTables.bootstrap.min.js",
                 "~/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js",
                "~/plugins/datatables/extensions/Responsive/js/dataTables.responsive.js"
                ));

 //datatable css
            bundles.Add(new StyleBundle("~/Content/datatable").Include(
                //"~/plugins/datatables/dataTables.bootstrap.css",
                "~/plugins/datatables/jquery.dataTables.min.css",
                    "~/plugins/datatables/jquery.dataTables_themeroller.min.css",
                    "~/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css"
                    ));

}

}

_____________________________________________________________________________

//

 @Styles.Render("~/Content/datatable")
    @Scripts.Render("~/bundles/datatable")

______________________________________________________________________________
<div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active" id="period1_group"><a href="#tab_1" data-toggle="tab">Group</a></li>
                            <li id="period2_operator" ><a href="#tab_2" data-toggle="tab">Operator</a></li>
                            <li id="period3_user" ><a href="#tab_3" data-toggle="tab">User</a></li>

                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <div id="ProfileValue_Group">
                                    @Html.Partial("v1")
                                 
                                 
                                 
                                </div>
                            </div>
                            <div class="tab-pane" id="tab_2">
                                <div id="divProfileValue_Operator">
                                    @Html.Partial("v2")

                                </div>
                            </div>
                            <div class="tab-pane" id="tab_3">
                                <div id="divProfileValue_User">
                                    @Html.Partial("v3")

                                </div>
                            </div>
                        </div>
                    </div>

_______________________________________________________________________
@section FooterSection
{
    <script>
        calldatatable();
        $(document).ready(function () {
            calldatatable();
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              $($.fn.dataTable.tables({ visible: true, api: true, responsive: true})).DataTable().columns.adjust().responsive.recalc();             
            });
        });
        function calldatatable() {
            $('#Profile_GroupMaster').DataTable({
                responsive: true, "destroy": true, 'retrieve': true, select: true,
            });
            $('#Profile_OperatorMaster').DataTable({
                responsive: true,
                "destroy": true, 'retrieve': true, select: true,
            });
            $('#ProfileValue_User').DataTable({
                responsive: true, "destroy": true, 'retrieve': true, select: true
            });
        }

    </script>

}

____________________________________________________________________________
//v1
<table id="Profile_GroupMaster" class="table table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>GroupID</th>
            <th>Tritex Group Name</th>
            <th>AgentLegalName</th>
            <th>IsAgent</th>
            <th>Address</th>
            <th>Country</th>
            <th>Postalcode</th>
            <th>EmailID</th>
            <th>WorkPhoneNo</th>
            <th>Operator Name</th>
        </tr>
    </thead>
    <tbody>
        @if (ViewBag.GroupMaster != null)
        {
            if (Enumerable.Count(ViewBag.GroupMaster) > 0)
            {
                foreach (var item in ViewBag.GroupMaster)
                {
                    <tr>
                        <td>@item.GroupID</td>
                        <td>@item.GroupName</td>
                        <td>@item.AgentLegalName</td>
                        <td>@item.IsAgent</td>
                        <td>@item.Address</td>
                        <td> @item.CountryName</td>
                        <td>@item.Postalcode</td>
                        <td>@item.EmailID</td>
                        <td>@item.WorkPhoneNo</td>
                        <td>@item.OperatorGroupName</td>
                    </tr>
                }
            }
        }
    </tbody>
</table>

_______________________________________________________________________________

<table id="Profile_OperatorMaster" class="table table-bordered" style="width:100%">

    <thead>

        <tr>

            <th>OperatorID</th>

            <th>Tritex Operator Name</th>

            <th>Address</th>

            <th>Country</th>

            <th>Postalcode</th>

            <th>EmailID</th>

            <th>WorkPhoneNo</th>

            <th>Operator Name</th>

            <th>Tritex Group Name</th>

        </tr>

    </thead>

    <tbody>

        @if (ViewBag.OperatorMaster != null)

        {

            if (Enumerable.Count(ViewBag.OperatorMaster) > 0)

            {

                foreach (var item in ViewBag.OperatorMaster)

                {

                    <tr>

                        <td>@item.OperatorID</td>

                        <td>@item.OperatorName</td>

                        <td>@item.Address</td>

                        <td> @item.CountryName </td>

                        <td>@(item.Postalcode == "0" ? null : item.Postalcode)</td>

                        <td>@item.EmailID</td>

                        <td>@item.WorkPhoneNo</td>

                        <td>@item.OperatorGroupName</td>

                        <td>@item.GroupName</td>

                    </tr>

                }

            }

        }

    </tbody>

</table>

______________________________________________________________________________

v3

<table id="ProfileValue_User" class="table table-bordered" style="width:100%">

    <thead>

        <tr>

            <th>UserID</th>

            <th>EmailID</th>

            <th>Role</th>

            <th>Address</th>

            <th>Country</th>

            <th>Postalcode</th>

            <th>WorkPhoneNo</th>

            <th>IsActive</th>

        </tr>

    </thead>

    <tbody>

        @if (ViewBag.UserMaster != null)

        {

            if (Enumerable.Count(ViewBag.UserMaster) > 0)

            {

                foreach (var item in ViewBag.UserMaster)

                {

                    <tr>

                        <td>@item.UserID</td>

                        <td>@item.EmailID</td>

                        <td>@item.RoleName</td>

                        <td>@item.Address</td>

                        <td> @item.CountryName </td>

                        <td>@item.Postalcode</td>

                        <td>@item.WorkPhoneNo</td>

                        <td>@item.IsActive</td>

                    </tr>

                }

            }

        }

    </tbody>

</table>

_______________________________________________________________________________