|
Comment posted by
Micha Demmers
on Thursday, June 9, 2011 2:34 AM
|
|
@Einar Arne
You are right you don't have to create an own pager for server side paging.
The reason you will want to do this is that you can create your own template for paging, like digg style paging.
Also creating your own pager like this example will give you the option to send data via json and jquery wich is must faster then using the server side paging with full page postback. An other advantage of creating an own pager is more attractive links in stead of having ?page=2 etc.
I've created a more advanced pager with digg style paging based on this article http://kpumuk.info/asp-net/gridview-with-custom-digg-like-pager/. Here's the javascript:
app.grids.js:
App = {};
App.Grid = {};
App.Grid.Build = function (id, appendTo, route) {
$.getJSON(route.join("/"), null, function (response) {
var append = typeof (appendTo) == typeof (undefined)
? "body"
: appendTo;
$(append).append(response.Data);
App.Grid.Build.Footer(response.Count, 0, id);
$("#" + id + " tfoot a").live("click", function (e) {
e.preventDefault();
var data = {
page: $(this).attr("class").replace("page-", "")
};
$.getJSON(route.join("/"), data, function (html) {
// add the data to the table
$("#" + id).remove();
$(append).append(html.Data);
// re-add the footer
$('#' + id + ' thead tfoot').remove();
App.Grid.Build.Footer(html.Count, parseInt(data.page), id);
});
});
});
};
App.Grid.Build.Footer = function (d, customPageIndex, id) {
var pageCount = Math.ceil(d / 5),
pageIndex = customPageIndex + 1,
pageButtonCount = 3,
row = $("<tr></tr>"),
cell = $("<td></td>");
var pager = $("<div></div>"),
min, max;
row.append(cell);
if (pageCount > 1) {
pager.attr("class", "pagination");
cell.append(pager);
min = pageIndex - pageButtonCount;
max = pageIndex + pageButtonCount;
if (max > pageCount) {
min -= (max - pageCount);
}
else if (min < 1) {
max += (1 - min);
}
if (pageIndex > 1) {
pager.append(BuildLinkButton(0, "First"));
page = BuildLinkButton(pageIndex - 2, "Previous")
} else {
page = BuildSpan("Previous", "disabled");
}
pager.append(page);
var needDiv = false;
for (i = 1; i <= pageCount; i++) {
if (i <= 2 || i > pageCount - 2 || (min <= i && i <= max)) {
var text = i;
page = i == pageIndex
? BuildSpan(text, "current")
: BuildLinkButton(i - 1, text);
pager.append(page);
needDiv = true;
}
else if (needDiv) {
page = BuildSpan("…", null);
pager.append(page);
needDiv = false;
}
};
if (pageIndex < pageCount) {
console.log("PageIndex: " + pageIndex);
page = BuildLinkButton(pageIndex, "Next");
pager.append(page);
pager.append(BuildLinkButton(pageCount - 1, "Last"));
} else {
page = BuildSpan("Next", "disabled");
pager.append(page);
}
}
var footer = $("<tfoot></tfoot>");
var footerRow = $("<tr></tr>");
footerRow.append(pager);
footer.append(footerRow);
$("#" + id + " thead").after(footer);
return footer;
};
function BuildLinkButton(pageIndex, text)
{
var pagerLink = $("<a></a>").attr("class", "page-" + pageIndex);
pagerLink.append(text);
return pagerLink;
};
function BuildSpan(text, cssClass)
{
var span = $("<span></span>");
span.attr("class", cssClass);
span.html(text);
return span;
}
Index.cshtml:
<script type="text/javascript" src="@Url.Content("~/Scripts/app.grids.js")"></script>
@{
ViewBag.Title = "Feeds";
}
<style>
div.pagination {
padding: 3px;
margin: 3px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
cursor: pointer;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
//ID for the table, append the table to wich element, Array of route values [Controller, Action]
App.Grid.Build("DataTable", "body", ["Feeds", "Grid"]);
});
</script>
Controller:
[HttpGet]
public JsonResult Grid(int? page)
{
int skip = page.HasValue ? page.Value : 0;
var data = _mostPopular.Skip(skip * 5).Take(5).ToList();
var grid = new WebGrid();
var htmlString = grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
htmlAttributes: new { id = "DataTable" });
return Json(new
{
Data = htmlString.ToHtmlString(),
Count = _mostPopular()
}, JsonRequestBehavior.AllowGet);
}