Click here to Skip to main content
15,041,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi.. am trying to implement dynamic pagination for my search result page using jquery.. How can i do pagination. How to list 10 results in a page and next page balance 10 results.

Problem:
#1) showing all result in one page


View
XML
<div class="searchform cf">
       @using (Html.BeginForm())
       {
           <input type="search" name="txtValue" id="txtValue" value="@Session["searched"]" placeholder="Need Service ? ">

           <input type="search" name="txtLocation" id="txtLocation" value="@Session["location"]" placeholder=" City or State">

           <button type="submit" value="Search" style="margin-top: 5px;" onclick="validatetextbox()">Search</button>
       }
   </div>
   <div>
       <h2 style="font-size: 15px;">Searched for "<i style="  padding: 0px 10px; color: #595FFF;">@Session["searched"]</i>"</h2>
   </div>
   <div class="example">

       <div id="content" class="content">
           <div style="margin: 35px 0px 0px 90px; height:500px;">

               @if (Model != null)
               {
                   if (Model.Count() != 0)
                   {
                       <div>
                           @foreach (var item in Model)
                           {
                               <div class="tiptext">
                                   <b style="margin-left: 0px; font-size: large;color: #1A0DB2;">@item.BusinessName</b>
                                   <h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> @item.FirstName</h3>
                                   <h3 style="margin: 8px; color:black">@item.BusinessCategory </h3>
                                   <div class="description">
                                       <div class="description_image">
                                           <img src="~/Images/popup_pointer.jpg" />
                                           <div class="POP_UP_outer">
                                               <div class="description_background">
                                                   <div class="description_map">
                                                       <b>Map</b>

                                                   </div><hr />
                                                   <div class="description_body">
                                                       <b>Description </b><h4 class="des">@item.BusinessDescription</h4>

                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                               </div>

                           }
                       </div>
                   }
                   else
                   {
                       <label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
                   }
               }

           </div>
       </div>

       <hr />
       <div class="pagination">
           <ul>
               <li><a href="#" id="prev" class="prevnext">« Previous</a></li>
               <li><a href="#" id="next" class="prevnext">Next »</a></li>
           </ul>
           <br />
           <div id="page_number" class="page_number">1</div>
       </div>

   </div>



Controller

C#
public ActionResult Index(string txtValue, string txtLocation)
        {
            var s = txtValue.ToString();
            Session["searched"] = s;
            var l = txtLocation.ToString();
            Session["location"] = l;
            if (txtValue.Length > 0)
            {
                string[] keywords = txtValue.Trim().Split(new string[] { " " }, StringSplitOptions.RemoveEmptyEntries);
                string[] keyword = txtLocation.Trim().Split(new string[] { " " }, StringSplitOptions.RemoveEmptyEntries);
                var parameter = new SqlParameter[2];
                parameter[0] = new SqlParameter { ParameterName = "@SEARCH", Value = txtValue };
                parameter[1] = new SqlParameter { ParameterName = "@loc", Value = txtLocation };
                List<search> cm = new List<search>();
                using (SYTEntities context = new SYTEntities())
                {
                    cm = context.Database.SqlQuery<search>("exec search_filter_sp @SEARCH,@loc", parameter).ToList();

                }

                return View(cm);
            }
          
            return View(); 
            
        }

JS
C#
(function($){
    $.fn.extend({
        MyPagination: function(options) {
            var defaults = {
                height: 400,
                fadeSpeed: 400
            };
            var options = $.extend(defaults, options);

            //Creating a reference to the object
            var objContent = $(this);

            // other inner variables
            var fullPages = new Array();
            var subPages = new Array();
            var height = 400;
            var lastPage = 1;
            var paginatePages;

            // initialization function
            init = function() {
                objContent.children().each(function(i){
                    if (height + this.clientHeight > options.height) {
                        fullPages.push(subPages);
                        subPages = new Array();
                        height = 400;
                    }

                    height += this.clientHeight;
                    subPages.push(this);
                });

                if (height > 0) {
                    fullPages.push(subPages);
                }

                // wrapping each full page
                $(fullPages).wrap("<div class='page'></div>");

                // hiding all wrapped pages
                objContent.children().hide();

                // making collection of pages for pagination
                paginatePages = objContent.children();

                // show first page
                showPage(lastPage);

                // draw controls
                showPagination($(paginatePages).length);
            };

            // update counter function
            updateCounter = function(i) {
                $('#page_number').html(i);
            };

            // show page function
            showPage = function(page) {
                i = page - 1;
                if (paginatePages[i]) {

                    // hiding old page, display new one
                    $(paginatePages[lastPage]).fadeOut(options.fadeSpeed);
                    lastPage = i;
                    $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                    // and updating counter
                    updateCounter(page);
                }
            };

            // show pagination function (draw switching numbers)
            showPagination = function(numPages) {
                var pagins = '';
                for (var i = 1; i <= numPages; i++) {
                    pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;">' + i + '</a></li>';
                }
                $('.pagination li:first-child').after(pagins);
            };

            // perform initialization
            init();

            // and binding 2 events - on clicking to Prev
            $('.pagination #prev').click(function() {
                showPage(lastPage);
            });
            // and Next
            $('.pagination #next').click(function() {
                showPage(lastPage+2);
            });

        }
    });
})(jQuery);

// custom initialization
jQuery(window).load(function() {
    $('#content').MyPagination({height: 400, fadeSpeed: 400});
});
Posted
Updated 27-Aug-15 21:43pm
v2

1 solution

http://www.codeproject.com/Tips/598468/Custom-Pagination-with-ASP-NET-MVC

Check this it might be helpfull.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900