mvc中的动态分页 [英] Dynamic pagination in mvc
本文介绍了mvc中的动态分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨..我正在尝试使用jquery为我的搜索结果页面实现动态分页..我怎样才能进行分页。如何在页面和下一页中列出10个结果平衡10个结果。
问题：
＃1）在一页显示所有结果
查看
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
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});
});
推荐答案
）{
.fn.extend（{
MyPagination：function（options）{
var defaults = {
height： 400 ，
fadeSpeed： 400
};
var options =
.fn.extend({ MyPagination: function(options) { var defaults = { height: 400, fadeSpeed: 400 }; var options =
.extend（默认值，选项）;
// 创建对象的引用
var objContent =
.extend(defaults, options); //Creating a reference to the object var objContent =
这篇关于mvc中的动态分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
