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);
var objContent = $(this);
var fullPages = new Array();
var subPages = new Array();
var height = 400;
var lastPage = 1;
var paginatePages;
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);
}
$(fullPages).wrap("<div class='page'></div>");
objContent.children().hide();
paginatePages = objContent.children();
showPage(lastPage);
showPagination($(paginatePages).length);
};
updateCounter = function(i) {
$('#page_number').html(i);
};
showPage = function(page) {
i = page - 1;
if (paginatePages[i]) {
$(paginatePages[lastPage]).fadeOut(options.fadeSpeed);
lastPage = i;
$(paginatePages[lastPage]).fadeIn(options.fadeSpeed);
updateCounter(page);
}
};
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);
};
init();
$('.pagination #prev').click(function() {
showPage(lastPage);
});
$('.pagination #next').click(function() {
showPage(lastPage+2);
});
}
});
})(jQuery);
jQuery(window).load(function() {
$('#content').MyPagination({height: 400, fadeSpeed: 400});
});