API tools faq
paste
SMASIF

Pagination Part III (View)

SMASIF
Nov 3rd, 2020
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.84 KB | None | 0 0
raw download clone embed print report
  1. @model HRCap.Models.Notification.ViewModels.NotificationVM
  2.  
  3.  
  4. @{
  5.     ViewBag.Title = "Index";
  6.  
  7.     Layout = "~/Views/Shared/Notification_Layout.cshtml";
  8.  
  9.     IEnumerable<HRCap.Models.Settings.Menutbl> menuList = (IEnumerable<HRCap.Models.Settings.Menutbl>)System.Web.HttpContext.Current.Session["LeftMenuSide"];
  10.     string create = "/Notify/Create";
  11. }
  12.  
  13. <style>
  14.     pre {
  15.          background-color: #fff;
  16.     }
  17.     div.dt-buttons {
  18.         position: relative;
  19.         float: left;
  20.         margin-top: 10px;
  21.     }
  22.  
  23.     input[type=search] {
  24.         width: 50%;
  25.         padding: 5px 10px;
  26.         margin: 10px 0;
  27.         box-sizing: border-box;
  28.     }
  29.  
  30.     .mr-1, .mx-1 {
  31.         margin-right: 0px !important;
  32.     }
  33.  
  34.     html body .la {
  35.         font-size: 1rem;
  36.         padding: 0px;
  37.     }
  38.  
  39.     select.form-control:not([size]):not([multiple]) {
  40.         height: calc(1.75rem + 2px);
  41.     }
  42.  
  43.     div.dataTables_wrapper div.dataTables_length label {
  44.         font-weight: normal;
  45.         text-align: left;
  46.         white-space: nowrap;
  47.         margin-top: 20px;
  48.     }
  49.  
  50.     .btn-group, .btn-group-vertical {
  51.         position: relative;
  52.         display: -webkit-inline-box;
  53.         display: -webkit-inline-flex;
  54.         display: -moz-inline-box;
  55.         display: -ms-inline-flexbox;
  56.         display: inherit !important;
  57.         vertical-align: middle;
  58.     }
  59.  
  60.     div.dataTables_wrapper div.dataTables_filter label {
  61.         margin-top: 0rem;
  62.     }
  63.  
  64.     .col-md-12 {
  65.         padding: 0px;
  66.     }
  67.  
  68.     .btn-secondary {
  69.         color: white;
  70.         background-color: white;
  71.         border-color: white;
  72.     }
  73.  
  74.     .PaginDesign {
  75.         margin: 6px;
  76.         font-size: 15px;
  77.     }
  78. </style>
  79.  
  80.  
  81. <div class="bg-white " style="padding:5px; padding-bottom:0px;">
  82.  
  83.     <ul class="breadcrumb">
  84.         <li class="breadcrumb-item"><a href="/Dashboard/Notification">Notification Dashboard</a></li>
  85.         <li class="breadcrumb-item active font-weight-bold"> Summary</li>
  86.     </ul>
  87. </div>
  88.  
  89. <div class="card">
  90.  
  91.     <div class="card-header card-head-inverse bg-blue-grey CustomizeHeader" @*style="padding-bottom: 4px !important;padding-top: 0px !important;"*@>
  92.         <div class="row">
  93.             <div class="col-6 col-md-6 col-lg-6 CustomizeHeaderTextDiv" @*style="padding-top: 7px; padding-bottom: 5px;"*@>
  94.                 <h4 class="card-title text-white">
  95.                     <i class="la la-clipboard"></i>  Notification
  96.                 </h4>
  97.             </div>
  98.             <div class="col-6 col-md-6 col-lg-6">
  99.                 <div class=" text-white font-weight-bold">
  100.                     @if (menuList.Any(x => x.Url == create))
  101.                     {
  102.                         <a href="/Notify/Create" class="btn btn-white   round btn-sm pull-right" style="color:black !important; "><i class="fa fa-plus append-icon"></i> New Notify</a>
  103.                     }
  104.                     </div>
  105.             </div>
  106.         </div>
  107.     </div>
  108.  
  109.     <div class="card-body">
  110.  
  111.         @using (Html.BeginForm("Summary", "Notify", FormMethod.Post, new { id = "searchForm" }))
  112.         {
  113.  
  114.  
  115.             <div class="form-body" style="margin-bottom:15px;margin-right:13px;">
  116.                 <div class="row">
  117.  
  118.                     @*<div class="col-md-4">
  119.                             <label>Receive Date</label>
  120.                             <div class="form-group">
  121.                                 <div class="position-relative has-icon-left">
  122.  
  123.                                     <input id="ReceiveDate" class="form-control input-sm " name="ReceiveDate" type="text" autocomplete="off" >
  124.  
  125.                                     <div class="form-control-position">
  126.                                         <i class="ft-calendar" style="margin-left: 1px"></i>
  127.                                     </div>
  128.                                 </div>
  129.                             </div>
  130.                         </div>*@
  131.                     @Html.HiddenFor(x => x.page)
  132.                     <input type="hidden" name="HiddenItemPerPage" value="@Model.HiddenItemPerPage" />
  133.  
  134.                     <div class="col-md-3">
  135.                         <label class="label-control">Number of item</label>
  136.                         @Html.DropDownListFor(model => model.ItemPerPage, new SelectList(Model.RangeDdl, "Value", "Text"), new { @class = "form-control input-sm" })
  137.                     </div>
  138.  
  139.                 </div>
  140.  
  141.  
  142.                 <div class="row">
  143.  
  144.                     <div class="col-12 col-sm-12 col-md-12 col-lg-12 pull-right">
  145.                         <button type="submit" class="btn btn-sm btn-outline-success pull-right mar-top" id="SearchBtn">
  146.                             <i class="fa fa-search"></i> Search
  147.                         </button>
  148.                         @*<button type="button" class="btn btn-sm btn-outline-warning pull-right mar-top" style="margin-right:8px;" id="ClearBtn">
  149.                                 <i class="fas fa-sync-alt"></i> Clear
  150.                             </button>*@
  151.                     </div>
  152.                 </div>
  153.  
  154.                 <div class="row" style="margin-top:5px;">
  155.  
  156.  
  157.  
  158.  
  159.                     <div class="col-12">
  160.                         <h3>Notifications</h3>
  161.                         <hr />
  162.                         <style>
  163.                             .list-group-item {
  164.                                 padding: .3rem;
  165.                             }
  166.                         </style>
  167.                         @if (Model.SummaryList != null && Model.SummaryList.Count > 0)
  168.                        {
  169.  
  170.  
  171.  
  172.                            <ul class="list-group">
  173.  
  174.                                @foreach (var item in Model.SummaryList)
  175.                                {
  176.                                <li class="list-group-item">
  177.                                    @if (item.IsJsonData == 1)
  178.                                    {
  179.                                        <span>
  180.                                            @item.NotificationText.Message@if (item.NotificationText.IsLinkAvailable == 1)
  181.                                            {<span> - </span>@Html.Raw(item.NotificationText.Link)}
  182.                                        </span>
  183.  
  184.                                    }
  185.                                    else
  186.                                    {
  187.                                        <pre>@item.TextNotify</pre>
  188.  
  189.                                    }
  190.                                    <button class="btn   btn-sm btn-success pull-right " data-toggle="tooltip" data-placement="top" title="Mark as Seen" id="b_@item.NotificationId" onclick="ChangeStatus('@item.EmpId','@item.NotificationId')"><i class="fas fa-check-circle"></i></button>
  191.  
  192.                                    <small class=" pull-right " style="padding-right:10px;">
  193.                                         <time class="media-meta text-muted">@item.NotificationServiceTime ago</time>
  194.                                     </small>
  195.                                 </li>
  196.  
  197.                                 }
  198.  
  199.                             </ul>
  200.  
  201.  
  202.  
  203.  
  204.                         }
  205.  
  206.                     </div>
  207.                 </div>
  208.  
  209.                 <div class="row">
  210.  
  211.                     <div class="col-12 col-md-12 ">
  212.                         <!-- pager -->
  213.                         @if (Model.pager.EndPage > 1)
  214.                         {
  215.                             <ul class="pagination pull-right" id="results">
  216.                                 @if (Model.pager.CurrentPage > 1)
  217.                                 {
  218.                                     <li class="page-item">
  219.                                         <a class="page-link" href="#" id="@Model.pager.StartPage">First</a>
  220.                                     </li>
  221.                                     <li class="page-item">
  222.                                         <a class="page-link" href="#" id="@(Model.pager.CurrentPage-1)">Previous</a>
  223.                                     </li>
  224.                                 }
  225.  
  226.                                 @for (var page = Model.pager.StartPage; page <= Model.pager.EndPage; page++)
  227.                                {
  228.                                    <li class="page-item @(page == Model.pager.CurrentPage ? "active" : "")">
  229.                                         <a class="page-link" href="#" id="@page">@page</a>
  230.                                     </li>
  231.                                 }
  232.  
  233.                                 @if (Model.pager.CurrentPage < Model.pager.TotalPages)
  234.                                {
  235.                                    <li class="page-item">
  236.                                         <a class="page-link" href="#" id="@(Model.pager.CurrentPage + 1)">Next</a>
  237.                                     </li>
  238.                                     <li class="page-item">
  239.                                         <a class="page-link" href="#" id="@(Model.pager.TotalPages)">Last</a>
  240.                                     </li>
  241.                                 }
  242.                             </ul>
  243.                         }
  244.                     </div>
  245.                 </div>
  246.  
  247.             </div>
  248.  
  249.  
  250.  
  251.  
  252.         }
  253.  
  254.  
  255.  
  256.  
  257.  
  258.     </div>
  259.  
  260.  
  261.  
  262. </div>
  263.  
  264. @section scripts{
  265.  
  266.  
  267.     <script type="text/javascript">
  268.         $(document).ready(function () {
  269.  
  270.  
  271.  
  272.    
  273.  
  274.             //Btn Submit Click
  275.             $('#SearchBtn').click(function (e) {
  276.  
  277.                 $('#page').val(1);
  278.                 $("form").attr("action", "/Notify/Summary");
  279.                // $('#searchForm').submit();
  280.  
  281.                // return false;
  282.             });
  283.  
  284.  
  285.             //Pagination
  286.             $('#results li a').click(function (e) {
  287.  
  288.                 var id = e.currentTarget.id;
  289.  
  290.                  $('#page').val(id);
  291.  
  292.  
  293.             $('#searchForm').submit();
  294.  
  295.             return false;
  296.             });
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.         });
  304.  
  305.  
  306.  
  307.     </script>
  308. }
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!