Dynamic pagination in mvc

See more:

Javascript

MVC

jQuery

MVC4

paging

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

<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

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

(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});
});