Post
Ask Question
Cassie Mod

Cassie Mod

  • NA
  • 488
  • 65.9k

How to add pagination like google ?

Mar 23 2017 6:57 AM
HI,
 
ive got the following repeater but how can i add paginanion like google because the old one isn't woking properly.
 
  1. <div class="content last">  
  2.     <asp:Repeater ID="rptUsers" runat="server">  
  3.         <HeaderTemplate>  
  4.             <table style="width: 100%;">  
  5.                 <thead>  
  6.                     <tr>  
  7.                         <th class="column-xxxl">  
  8.                             <asp:LinkButton ID="sortNameLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserNameColumn) %>' runat="server" OnClick="SortColumn_Click">Naam</asp:LinkButton>  
  9.                         </th>  
  10.                         <th class="column-xl">  
  11.                             <asp:LinkButton ID="sortPhoneNumberLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserPhoneNumberColumn) %>' runat="server" OnClick="SortColumn_Click">Telefoonnummer</asp:LinkButton>  
  12.                         </th>  
  13.                         <th class="column-l">  
  14.                             <asp:LinkButton ID="sortInternalNumberLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserInternalNumberColumn) %>' runat="server" OnClick="SortColumn_Click">Intern Nummer</asp:LinkButton>  
  15.                         </th>  
  16.                         <%  if (Features.Locations)  
  17.                             {  
  18.                         %>  
  19.                         <th class="column-l">  
  20.                             <asp:LinkButton ID="sortLocationLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserLocationColumn) %>' runat="server" OnClick="SortColumn_Click">Afdeling</asp:LinkButton>  
  21.                         </th>  
  22.                         <% } %>  
  23.                         <th class="column-xxxl">  
  24.                             <asp:LinkButton ID="sortEmailLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserEmailColumn) %>' runat="server" OnClick="SortColumn_Click">Email</asp:LinkButton>  
  25.                         </th>  
  26.                         <th class="column-s" style="text-align: center;">  
  27.                             <asp:LinkButton ID="sortQueueLink" CssClass='<%# GetSortArrowCssClass(KeyConstants.UserQueueColumn) %>' runat="server" OnClick="SortColumn_Click">Wachtrij</asp:LinkButton>  
  28.                         </th>  
  29.                         <% if (Features != null && Features.DeleteUsers)  
  30.                             { %>  
  31.                         <th class="column-xxs" style="text-align: center;">   
  32.                         </th>  
  33.                         <% } %>  
  34.                     </tr>  
  35.                 </thead>  
  36.         </HeaderTemplate>  
  37.         <ItemTemplate>  
  38.             <tr>  
  39.                 <td>  
  40.                     <asp:HyperLink ID="phoneManagementHyperLink" runat="server" Text='<%# (Container.DataItem as WcfUser).firstName + " " + (Container.DataItem as WcfUser).lastName%>'  
  41.                         NavigateUrl='<%#PortalApplication.GetUrl(PortalApplication.GetCommandByName(ApplicationCommands.UserEdit).Url)+string.Format("?userId={0}", (Container.DataItem as WcfUser).userId)%>' />  
  42.                 </td>  
  43.                 <td>  
  44.                     <%# (Container.DataItem as WcfUser).phoneNumber%>  
  45.                 </td>  
  46.                 <td>  
  47.                     <%# (Container.DataItem as WcfUser).extension%>  
  48.                 </td>  
  49.                 <% if (Features != null && Features.Locations)  
  50.                     {  
  51.                 %>  
  52.                 <td>  
  53.                     <%# (Container.DataItem as WcfUser).departmentFullPath%>  
  54.                 </td>  
  55.                 <%   }  %>  
  56.                 <td>  
  57.                     <%# (Container.DataItem as WcfUser).emailAddress%>  
  58.                 </td>  
  59.                 <td>  
  60.                     <div class='icon-16 active read-only check' style='<%# (Container.DataItem as WcfUser).hasCallQueueService ? "margin: 0 auto;": "display:none;" %>'></div>  
  61.                 </td>  
  62.                 <% if (Features != null && Features.DeleteUsers)  
  63.                     { %>  
  64.                 <td class="column-controls">  
  65.                     <asp:Button ID="deleteUserButton" runat="server" CommandName="Gebruiker Verwijderen"  
  66.                         OnClientClick="return confirm('Weet u zeker dat u deze gebruiker wilt verwijderen?')"  
  67.                         CssClass="icon-16 bin" OnClick="DeleteUserButton_Click" CommandArgument="<%#  (Container.DataItem as WcfUser).userId  %>" />  
  68.                 </td>  
  69.                 <% } %>  
  70.             </tr>  
  71.         </ItemTemplate>  
  72.         <FooterTemplate>  
  73.             </table>  
  74.             <div style="margin: 5px auto; width: 450px;">  
  75.                 <asp:Button ID="firstPageButton" runat="server" Text=" First " OnClick="firstPageButton_Click"  
  76.                     CssClass="button-s" />  
  77.                 <asp:Button ID="prevThreePagesButton" runat="server" Text=" <<< " OnClick="prevThreePagesButton_Click"  
  78.                     CssClass="button-s" />  
  79.                 <asp:Button ID="prevButton" runat="server" Text=" < " OnClick="prevButton_Click"  
  80.                     CssClass="button-s" />  
  81.                 <asp:Label ID="currentPageLabel" runat="server" CssClass="label label-xxs" Style="text-align: center;" />  
  82.                 <asp:Button ID="nextButton" runat="server" Text=" > " OnClick="nextButton_Click"  
  83.                     CssClass="button-s" />  
  84.                 <asp:Button ID="nextThreePagesButton" runat="server" Text=" >>> " OnClick="nextThreePagesButton_Click"  
  85.                     CssClass="button-s" />  
  86.                 <asp:Button ID="lastPageButton" runat="server" Text=" Last " OnClick="lastPageButton_Click"  
  87.                     CssClass="button-s" />  
  88.             </div>  
  89.             <div>  
  90.                 <asp:Label ID="CurrentPageOfTotalPagesLabel" Visible="True" runat="server" CssClass="label label-xxl" Style="text-align: right; float: right" />  
  91.             </div>  
  92.         </FooterTemplate>  
  93.     </asp:Repeater>  
  94.     <div class="row error">  
  95.         <asp:Literal ID="FailureTextLiteral" runat="server" EnableViewState="False" />  
  96.     </div>  
  97. </div>  
 
  1. public partial class UsersControl : CompleetControl  
  2. {  
  3.     protected Features Features;  
  4.     private User _user;  
  5.     private Guid _sessionId;  
  6.   
  7.     public int PageSize = 5;  
  8.     private static int _pageCount;  
  9.     private static int _userAmount;  
  10.   
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         _sessionId = Guid.Parse(HttpContext.Current.Session["BWSESSION"].ToString());  
  14.   
  15.         try  
  16.         {  
  17.             if (PortalApplication == null)  
  18.                 return;  
  19.   
  20.             Features = new Features(PortalApplication.User);  
  21.             if (!Features.ReadUsers)  
  22.             {  
  23.                 PortalApplication.ExecuteCommand(PortalApplication.GetAfterErrorCommand(404));  
  24.                 return;  
  25.             }  
  26.   
  27.             if (!IsPostBack)  
  28.                 FillRptUsers();  
  29.   
  30.             AddUserHyperLink.NavigateUrl = PortalApplication.GetUrl(PortalApplication.GetCommandByName(ApplicationCommands.UserAdd).Url);  
  31.         }  
  32.         catch (Exception ex)  
  33.         {  
  34.             PortalApplication.HandleException(ex);  
  35.             ShowFailureText();  
  36.         }  
  37.     }  
  38.   
  39.     public void FillRptUsers()  
  40.     {  
  41.         //trim filter  
  42.         char[] charsToTrim = { ' ', '\t' };  
  43.         UserFilter.Text = UserFilter.Text.Trim(charsToTrim);  
  44.   
  45.         // set start index  
  46.         var startIndex = PageSize*CurrentPage;  
  47.   
  48.         // Get sortingmethod and SortingColumn  
  49.         var sorthingMethod = (string) ViewState["SortOrder"];  
  50.         var sorthingColumn = (string) ViewState["SortColumn"];  
  51.   
  52.         if (string.IsNullOrEmpty(sorthingMethod))  
  53.             sorthingMethod = "Asc";  
  54.   
  55.         if (string.IsNullOrEmpty(sorthingColumn))  
  56.             sorthingColumn = "Name";  
  57.   
  58.         var serviceProviderId = PortalApplication.User.serviceProviderId;  
  59.         var groupId = PortalApplication.User.groupId;  
  60.         var userResponse = PortalApplication.GetGroupUsers(  
  61.             serviceProviderId: serviceProviderId,   
  62.             groupId: groupId,   
  63.             filter: UserFilter.Text,   
  64.             curPage: CurrentPage,   
  65.             startIndex: startIndex,  
  66.             limit: PageSize,  
  67.             sortOrder: sorthingMethod,  
  68.             sortColumn: sorthingColumn  
  69.             );  
  70.   
  71.         var users = userResponse.Item1;  
  72.         _userAmount = userResponse.Item2;  
  73.   
  74.         //if ((string)ViewState["SortOrder"] == KeyConstants.AscSortOrder)  
  75.         //    switch ((string)ViewState["SortColumn"])  
  76.         //    {  
  77.         //        case KeyConstants.UserNameColumn:  
  78.         //            users = users.OrderBy(x => x.firstName).ThenBy(x => x.lastName).ToList();  
  79.         //            break;  
  80.         //        case KeyConstants.UserPhoneNumberColumn:  
  81.         //            users = users.OrderBy(x => x.phoneNumber).ToList();  
  82.         //            break;  
  83.         //        case KeyConstants.UserInternalNumberColumn:  
  84.         //            users = users.OrderBy(x => x.extension).ToList();  
  85.         //            break;  
  86.         //        case KeyConstants.UserLocationColumn:  
  87.         //            users = users.OrderBy(x => x.departmentFullPath).ToList();  
  88.         //            break;  
  89.         //        case KeyConstants.UserEmailColumn:  
  90.         //            users = users.OrderBy(x => x.emailAddress).ToList();  
  91.         //            break;  
  92.         //        case KeyConstants.UserQueueColumn:  
  93.         //            users = users.OrderBy(x => x.hasCallQueueService).ToList();  
  94.         //            break;  
  95.         //    }  
  96.         //else if ((string)ViewState["SortOrder"] == KeyConstants.DescSortOrder)  
  97.         //    switch ((string)ViewState["SortColumn"])  
  98.         //    {  
  99.         //        case KeyConstants.UserNameColumn:  
  100.         //            users = users.OrderByDescending(x => x.firstName).ThenByDescending(x => x.lastName).ToList();  
  101.         //            break;  
  102.         //        case KeyConstants.UserPhoneNumberColumn:  
  103.         //            users = users.OrderByDescending(x => x.phoneNumber).ToList();  
  104.         //            break;  
  105.         //        case KeyConstants.UserInternalNumberColumn:  
  106.         //            users = users.OrderByDescending(x => x.extension).ToList();  
  107.         //            break;  
  108.         //        case KeyConstants.UserLocationColumn:  
  109.         //            users = users.OrderByDescending(x => x.departmentFullPath).ToList();  
  110.         //            break;  
  111.         //        case KeyConstants.UserEmailColumn:  
  112.         //            users = users.OrderByDescending(x => x.emailAddress).ToList();  
  113.         //            break;  
  114.         //        case KeyConstants.UserQueueColumn:  
  115.         //            users = users.OrderByDescending(x => x.hasCallQueueService).ToList();  
  116.         //            break;  
  117.         //    }  
  118.         //else  
  119.         //    users = users.OrderBy(x => x.firstName).ThenBy(x => x.lastName).ToList();  
  120.   
  121.         // Consistant numbers:  
  122.         foreach (var user in users)  
  123.             user.phoneNumber = CompleetApplication.E164ToLocal(user.phoneNumber);  
  124.   
  125.         var dataSource = new PagedDataSource  
  126.         {  
  127.             DataSource = users,  
  128.             AllowPaging = true,  
  129.             PageSize = PageSize,  
  130.             VirtualCount = _userAmount  
  131.         };  
  132.   
  133.         rptUsers.DataSource = dataSource;  
  134.         rptUsers.DataBind();  
  135.   
  136.         _pageCount = _userAmount%PageSize == 0 ? _userAmount/PageSize : (_userAmount/PageSize) + 1;  
  137.         SetPageControl(dataSource);  
  138.     }  
  139.   
  140.     public void SetPageControl(PagedDataSource dataSource)  
  141.     {  
  142.         var currentPageLabel = (Label)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("currentPageLabel");  
  143.         var nextPageButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("nextButton");  
  144.         var prevPageButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("prevButton");  
  145.         var prevThreePagesButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("prevThreePagesButton");  
  146.         var nextThreePagesButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("nextThreePagesButton");  
  147.         var firstPageButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("firstPageButton");  
  148.         var lastPageButton = (Button)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("lastPageButton");  
  149.         var currentPageOfTotalPagesLabel = (Label)rptUsers.Controls[rptUsers.Controls.Count - 1].Controls[0].FindControl("CurrentPageOfTotalPagesLabel");  
  150.   
  151.         nextPageButton.Visible = true;  
  152.         prevPageButton.Visible = true;  
  153.         prevThreePagesButton.Visible = true;  
  154.         nextThreePagesButton.Visible = true;  
  155.         firstPageButton.Visible = true;  
  156.         lastPageButton.Visible = true;  
  157.   
  158.         currentPageLabel.Text = (CurrentPage + 1).ToString();  
  159.   
  160.         // shows current page of total pages   
  161.         var itemsvalue = ((CurrentPage*10) + 10) > _userAmount ? _userAmount : (CurrentPage*10) + 10;  
  162.         currentPageOfTotalPagesLabel.Text = $"Items {(CurrentPage * 10) + 1} t/m {itemsvalue} van {_userAmount}";  
  163.   
  164.         if (dataSource.PageCount == 1)  
  165.         {  
  166.             prevPageButton.Visible = true;  
  167.             currentPageLabel.Visible = true;  
  168.             nextPageButton.Visible = true;  
  169.             prevThreePagesButton.Visible = true;  
  170.             nextThreePagesButton.Visible = true;  
  171.             firstPageButton.Visible = true;  
  172.             lastPageButton.Visible = true;  
  173.         }  
  174.   
  175.         if (CurrentPage + 1 >= _pageCount)  
  176.         {  
  177.             nextPageButton.Visible = false;  
  178.             nextThreePagesButton.Visible = false;  
  179.             lastPageButton.Visible = false;  
  180.         }  
  181.   
  182.         if (CurrentPage == 0)  
  183.         {  
  184.             prevPageButton.Enabled = false;  
  185.             prevPageButton.Text = " ";  
  186.             prevPageButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, "transparent");  
  187.             prevPageButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BorderWidth, "0");  
  188.   
  189.             prevThreePagesButton.Enabled = false;  
  190.             prevThreePagesButton.Text = " ";  
  191.             prevThreePagesButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, "transparent");  
  192.             prevThreePagesButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BorderWidth, "0");  
  193.   
  194.             firstPageButton.Enabled = false;  
  195.             firstPageButton.Text = " ";  
  196.             firstPageButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, "transparent");  
  197.             firstPageButton.Attributes.CssStyle.Add(HtmlTextWriterStyle.BorderWidth, "0");  
  198.         }  
  199.   
  200.     }  
  201.   
  202.     public int CurrentPage  
  203.     {  
  204.         get  
  205.         {  
  206.             var o = ViewState["_CurrentPage"];  
  207.             if (o == null)  
  208.                 return 0;  
  209.             return (int)o;  
  210.         }  
  211.   
  212.         set  
  213.         {  
  214.             ViewState["_CurrentPage"] = value;  
  215.         }  
  216.     }  
  217.   
  218.     protected void prevButton_Click(object sender, EventArgs e)  
  219.     {  
  220.         CurrentPage -= 1;  
  221.         FillRptUsers();  
  222.     }  
  223.   
  224.     protected void prevThreePagesButton_Click(object sender, EventArgs e)  
  225.     {  
  226.         CurrentPage -= 3;  
  227.         FillRptUsers();  
  228.     }  
  229.   
  230.     protected void firstPageButton_Click(object sender, EventArgs e)  
  231.     {  
  232.         CurrentPage = 0;  
  233.         FillRptUsers();  
  234.     }  
  235.   
  236.     protected void nextButton_Click(object sender, EventArgs e)  
  237.     {  
  238.         CurrentPage += 1;  
  239.         FillRptUsers();  
  240.     }  
  241.   
  242.     protected void nextThreePagesButton_Click(object sender, EventArgs e)  
  243.     {  
  244.         CurrentPage += 3;  
  245.         FillRptUsers();  
  246.     }  
  247.     protected void lastPageButton_Click(object sender, EventArgs e)  
  248.     {  
  249.         CurrentPage = _pageCount -1;  
  250.         FillRptUsers();  
  251.     }  

Answers (1)