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

Sql dynamic query With Join And search using like query with multiple column

Sql dynamic query With Join And search using like query with multiple column declare @keyword varchar(100) DECLARE @sqlCommand va...

Popular Posts