Pagination is a typical process in data display whereby large sets of data are broken into discrete sections for viewing, more often than not used in conjunction with some type of grid or list component.

CSHTML:

1. @using Smp.Web.Common;
2. @inherits umbraco.MacroEngines.DynamicNodeContext
3. @{
4.     Smp.Web.WebServices.HistoricalService objHS = new Smp.Web.WebServices.HistoricalService();
5.     var HS = objHS.GetHistoricalPrices(1, PageSize, "", "");
6.     var PageCount = 0;
7.     var PageSize = 10;
8.     foreach (var item in HS)
9.     {
10.         PageCount = item._noOfPages;
11.         break;
12.     }
13. }
14. <div class="historical_content_pop">
15.     <div class="paginationHolder">
16.     <ul class="hsPagination paginationList">
17.     @for (int i = 1; i <= PageCount; i++)
18.     {
19.         if (i == 1)
20.         {
21.         <li><a pageno="@i" href="javascript:void(0);" class="currentSearchPage">@i</a></li>
22.         }
23.         else
24.         {
25.         <li><a pageno="@i" href="javascript:void(0);">@i</a></li>
26.         }
27.         if (i == 10 && PageCount > 10)
28.         {
29.         <li><a class="next" pageno="11" href="javascript:void(0);">
30.             <img src="/images/pagination_arrow_next.png" alt=">" /></a></li>
31.             break;
32.         }
33.     }
34.     </ul>
35.     </div>
36.     <div class="historicalContcontain">
37.         <div class="dateFilter">
38.             <form id="frmHistoricalPrices">
39.             <input id="txtStartDate" class="priceFilterField firstField" type="text" placeholder="Start Date" />
40.             <input id="txtEndDate" class="priceFilterField" type="text" placeholder="End Date" />
41.             <p class="formHelper">Ex: 01/01/2000</p> <a href="javascript:void(0);" id="btnApply"
42.                 class="priceFilterBtn">SEARCH</a>
43.             </form>
44.         </div>
45.         <div class="priceResultHolder">
46.             <ul class="priceResultHeader">
47.                 <li class="priceDateCol">Date</li>
48.                 <li class="pricePriceCol">Price</li>
49.                 <li class="priceHighCol">High</li>
50.                 <li class="priceVolumeCol">Volume</li>
51.             </ul>
52.             @{var count = 1; var classUL = "";}
53.             @foreach (var item in HS)
54.             {
55.                 if (count % 2 == 0)
56.                 {
57.                     classUL = "priceResultList alt";
58.                 }
59.                 else
60.                 {
61.                     classUL = "priceResultList";
62.                 }
63.                 count++;
64.                 <ul class="@classUL">
65.                     <li class="priceDateCol">@item._date</li>
66.                     <li class="pricePriceCol">@item._price</li>
67.                     <li class="priceHighCol">@item._high</li>
68.                     <li class="priceVolumeCol">@Convert.ToDecimal(item._volume).ToString("N0")</li>
69.                 </ul>
70.             }
71.         </div>
72.     </div>
73. </div>

jQuery:

1. <script type="text/javascript">
2. $("#btnApply").click(function () {
3.     FetchHistoricalData(1, 10, this);
4. });
5. $(".hsPagination li a").die("click").live('click', function () {
6.     var pageNo = parseInt($(this).attr('pageno'));
7.     FetchHistoricalData(pageNo, 10, this);
8. });
9. function FetchHistoricalData(pageNo, pageSize, obj) {
10.     var startDate = $("#txtStartDate").val();
11.     var endDate = $("#txtEndDate").val();
12.     $.ajax({
13.         type: "POST",
14.         data: "{pageNo:" + pageNo + ",pageSize:" + pageSize + ",'StDate':'" + startDate + "','EndDate':'" + endDate + "'}",
15.         url: "/WebServices/HistoricalService.asmx/GetHistoricalPrices",
16.         contentType: "application/json; charset=utf-8",
17.         dataType: "json",
18.         success: function (response) {
19.             var hs = response.d;
20.             var htmlData = "";
21.             var htmlPagination = "";
22.             var classUL = "";
23.             var pageCount = 0;
24.             htmlData += "<ul class='priceResultHeader'>";
25.             htmlData += "<li class='priceDateCol'>Date</li>";
26.             htmlData += "<li class='pricePriceCol'>Price</li>";
27.             htmlData += "<li class='priceHighCol'>High</li>";
28.             htmlData += "<li class='priceVolumeCol'>Volume</li></ul>";
29.             for (var i = 0; i < hs.length; i++) {
30.                 if (i % 2 == 0) {
31.                     classUL = "priceResultList";
32.                 }
33.                 else {
34.                     classUL = "priceResultList alt";
35.                 }
36.                 htmlData += "<ul class='" + classUL + "'>";
37.                 htmlData += "<li class='priceDateCol'>" + hs[i]._date + "</li>";
38.                 htmlData += "<li class='pricePriceCol'>" + hs[i]._price + "</li>";
39.                 htmlData += "<li class='priceHighCol'>" + hs[i]._high + "</li>";
40.                 htmlData += "<li class='priceVolumeCol'>" + (hs[i]._volume).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + "</li></ul>";
41.                 pageCount = hs[i]._noOfPages;
42.             }
43.             $(".priceResultHolder").html(htmlData);
44.             if ($(obj).hasClass('next')) {
45.                 var prevPage = pageNo - 1;
46.                 var nextPage = pageNo + 10;
47.                 var lastPage = pageNo + 9;
48.                 var last = false;
49.                 if (lastPage > pageCount) {
50.                     lastPage = pageCount;
51.                     last = true;
52.                 }
53.                 htmlPagination += "<li><a pageno='" + prevPage + "' class='prev' href='javascript:void(0);'><img src='/images/pagination_arrow_prev.png' alt='<' /></a></li>";
54.                 for (var i = pageNo; i <= lastPage; i++) {
55.                     if (i == pageNo) {
56.                         htmlPagination += "<li><a class='currentSearchPage' pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
57.                     }
58.                     else {
59.                         htmlPagination += "<li><a pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
60.                     }
61.                 }
62.                 if (!last) {
63.                     htmlPagination += "<li><a pageno='" + nextPage + "' class='next' href='javascript:void(0);'><img src='/images/pagination_arrow_next.png' alt='>' /></a></li>";
64.                 }
65.                 $(".hsPagination").html(htmlPagination);
66.                 htmlPagination = "";
67.             }
68.             else if ($(obj).hasClass('prev')) {
69.                 var prevPage = pageNo - 10;
70.                 var nextPage = pageNo + 1;
71.                 var firstPage = pageNo - 9;
72.                 if (pageCount > 10) {
73.                     if (prevPage != 0) {
74.                         htmlPagination += "<li><a pageno='" + prevPage + "' class='prev' href='javascript:void(0);'><img src='/images/pagination_arrow_prev.png' alt='<' /></a></li>";
75.                     }
76.                     for (var i = firstPage; i < nextPage; i++) {
77.                         if (i == nextPage - 1) {
78.                             htmlPagination += "<li><a class='currentSearchPage' pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
79.                         }
80.                         else {
81.                             htmlPagination += "<li><a pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
82.                         }
83.                     }
84.                     htmlPagination += "<li><a pageno='" + nextPage + "' class='next' href='javascript:void(0);'><img src='/images/pagination_arrow_next.png' alt='>' /></a></li>";
85.                 }
86.                 $(".hsPagination").html(htmlPagination);
87.                 htmlPagination = "";
88.             }
89.             else if ($(obj).hasClass('priceFilterBtn')) {
90.                 if (pageCount > 1) {
91.                     for (var i = 1; i <= pageCount; i++) {
92.                         if (i == 1) {
93.                             htmlPagination += "<li><a class='currentSearchPage' pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
94.                         }
95.                         else {
96.                             htmlPagination += "<li><a pageno='" + i + "' href='javascript:void(0);'>" + i + "</a></li>";
97.                         }
98.                         if (i == 10 && pageCount > 10) {
99.                             htmlPagination += "<li><a pageno='11' class='next' href='javascript:void(0);'><img src='/images/pagination_arrow_next.png' alt='>' /></a></li>";
100.                             break;
101.                         }
102.                     }
103.                 }
104.                 $(".hsPagination").html(htmlPagination);
105.                 htmlPagination = "";
106.             }
107.             else {
108.                 $('.hsPagination li a').each(function () {
109.                     $(this).removeClass('currentSearchPage');
110.                 });
111.                 $(obj).addClass('currentSearchPage');
112.             }
113.             htmlData = "";
114.         }
115.     });
116. }
117. </script>

Web Service:

1. [WebMethod(EnableSession = true)]
2. public List<HistoricalProperty> GetHistoricalPrices(int pageNo, int pageSize, string StDate, string EndDate)
3. {
4.     List<HistoricalProperty> historyPricesList = new List<HistoricalProperty>();
5.     try
6.     {
7.         var skipPrices = (pageNo - 1) * pageSize;
8.         if (Context.Session["historicalPrice"] != null)
9.         {
10.             historyPricesList = (List<HistoricalProperty>)Context.Session["historicalPrice"];
11.             if (StDate.Trim() != "" || EndDate.Trim() != "")
12.             {
13.                 historyPricesList = historyPricesList.Where(x => Convert.ToDateTime(x._date) >= Convert.ToDateTime(StDate) && Convert.ToDateTime(x._date) <= Convert.ToDateTime(EndDate)).ToList();
14.             }
15.             var totalCount = historyPricesList.Count();
16.             historyPricesList = historyPricesList.Skip(skipPrices).Take(pageSize).ToList();
17.             var totalPageCount = 0;
18.             if (totalCount % pageSize == 0)
19.             {
20.                 totalPageCount = totalCount / pageSize;
21.             }
22.             else
23.             {
24.                 totalPageCount = totalCount / pageSize + 1;
25.             }
26.             foreach (var item in historyPricesList)
27.             {
28.                 item._totalCount = totalCount;
29.                 item._noOfPages = totalPageCount;
30.             }
31.         }
32.         else
33.         {
34.             SMPHistoricalService.Header HisHeader = new SMPHistoricalService.Header();
35.             HisHeader.Username = ApplicationConstants._HistoricalHeaderUsername;
36.             SMPHistoricalService.SMPHIstoricalSplice HisSplice = new SMPHistoricalService.SMPHIstoricalSplice();
37.             HisSplice.HeaderValue = HisHeader;
38.             SMPHistoricalService.Untitled HisOutputData = HisSplice.SMPXignite_SMPHIstorical(SMPHistoricalService.IdentifierTypes.Symbol, "", "");
39.             SMPHistoricalService.Quotes[] Quotes = HisOutputData.GetHistoricalQuotesRangeReturnObject.Quotes;
40.             //This Splice takes the inputs Identifier, IdentifierType, StartDate, EndDate
41.             //and calls GetHistoricalQuotesRange to generate Untitled.  
42.             var totalCount = Quotes.Count();
43.             var totalPageCount = 0;
44.             if (totalCount % pageSize == 0)
45.             {
46.                 totalPageCount = totalCount / pageSize;
47.             }
48.             else
49.             {
50.                 totalPageCount = totalCount / pageSize + 1;
51.             }
52.             foreach (var quote in Quotes)
53.             {
54.                 historyPricesList.Add(new HistoricalProperty
55.                 {
56.                     _date = quote.Date,
57.                     _price = quote.Price.ToString(),
58.                     _high = quote.High.ToString(),
59.                     _volume = quote.Volume.ToString(),
60.                     _totalCount = totalCount,
61.                     _noOfPages = totalPageCount
62.                 });
63.             }
64.             Context.Session["historicalPrice"] = historyPricesList;
65.             historyPricesList = historyPricesList.Skip(skipPrices).Take(pageSize).ToList();
66.         }
67.     }
68.     catch
69.     {
70.         historyPricesList.Add(new HistoricalProperty { _errorMessage = ApplicationConstants._ServiceErrorMessage });
71.     }
72.     return historyPricesList;
73. }