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>
_______________________________________________________________________________

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

How To Dynamic Upload multiple files with extra detail of model in asp.net core

 How To Dynamic Upload multiple files with extra detail of model in asp.net core  1). firstly create Model File  namespace MyModel {     pub...

Popular Posts