分页控件-Jquery-MVC
来源:互联网 发布:linux查询文件位置 编辑:程序博客网 时间:2024/05/21 07:24
1:JS文件:
(function ($) {
$.fn.pager = function (options) {
var opts = $.extend({}, $.fn.pager.defaults, options);
return this.each(function () {
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
$("#btnpagerTo").keydown(function (event) {
if (event.keyCode == 13) {
var tempval = $(this).val();
if ((parseInt(tempval) <= parseInt(options.pagecount)) && parseInt(tempval) !=0) {
options.buttonClickCallback(tempval);
}
}
});
});
};
function renderpager(pagenumber, pagecount, buttonClickCallback) {
var $pager = $('<div class="Samplepages"></div>');
if (pagenumber == 1) {
$pager.append("<label>首º¡Á页°3</label>").append("<label>上¦?一°?页°3</label>");
}
else {
$pager.append(renderButton('首º¡Á页°3', pagenumber, pagecount, buttonClickCallback))
.append(renderButton('上¦?一°?页°3', pagenumber, pagecount, buttonClickCallback));
}
var startPoint = 1;
var endPoint = 9;
if (pagenumber > 4) {
startPoint = pagenumber - 4;
endPoint = pagenumber + 4;
}
if (endPoint > pagecount) {
startPoint = pagecount - 8;
endPoint = pagecount;
}
if (startPoint < 1) {
startPoint = 1;
}
for (var page = startPoint; page <= endPoint; page++) {
var currentButton = $('<label class="page-number">' + (page) + '</label>');
page == pagenumber ? (currentButton = $('<label class="page-number">' + (page) + '</label>')) : currentButton = $('<a href="#" class="page-number">' + (page) + '</a>');
page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function () { buttonClickCallback(this.firstChild.data); });
currentButton.appendTo($pager);
}
if (pagecount == pagenumber || (pagecount == 0 && pagenumber == 1)) {
$pager.append("<label>下?一°?页°3</label>");
}
else {
$pager.append(renderButton('下?一°?页°3', pagenumber, pagecount, buttonClickCallback));
}
$pager.append("<label>共2" + pagecount + "页°3</label>")
.append("<label>到Ì?第̨²</label><input type='text' id='btnpagerTo' style='width:25px;' /><label>页°3</label>");
if (pagecount == pagenumber || (pagecount == 0 && pagenumber == 1)) {
$pager.append("<label>末?页°3</label>");
}
else {
$pager.append(renderButton('末?页°3', pagenumber, pagecount, buttonClickCallback));
}
return $pager;
}
function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
var $Button = $('<a href="#">' + buttonLabel + '</a>');
var $curBtn = $("<label>" + buttonLabel + "</label>");
var destPage = 1;
switch (buttonLabel) {
case "首º¡Á页°3":
destPage = 1;
break;
case "上¦?一°?页°3":
destPage = pagenumber - 1;
break;
case "下?一°?页°3":
destPage = pagenumber + 1;
break;
case "末?页°3":
destPage = pagecount;
break;
}
if (buttonLabel == "首º¡Á页°3" || buttonLabel == "上¦?一°?页°3") {
pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); });
}
else {
pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); });
}
return $Button;
}
$.fn.pager.defaults = {
pagenumber: 1,
pagecount: 1
};
})(jQuery);
2:简单CSS:(可配)
.Samplepages a, .Samplepages label
{
margin: 0 3px;
}
.Samplepages a
{
border:1px solid #003f7e;
padding:1px 3px 1px 3px;
}
.pgCurrent
{
background-color: Yellow;
}
3:html:
<div id="pager" style="margin: 0px auto; width: 600px; float: right;">
</div>
4:页面配置:
PageClick = function (pageclickednumber, pageTotal) {
callServe(pageclickednumber);
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: pageTotal, buttonClickCallback: PageClick });
}
function sucessFun(data) {
try {
var rtndata = data.data;
$("#contentTable tr:gt(0)").remove();
for (var i = 0; i < rtndata.length; i++) {
var tmpTr = "<tr><td><input type='checkbox' value='" + rtndata[i].SKU + "' /> </td><td>" + rtndata[i].SKU + "</td><td>"
+ rtndata[i].ProductCode + "</td> <td>" + rtndata[i].Name + "</td> <td>" + rtndata[i].Color + " </td> <td>" + rtndata[i].Size
+ "</td> <td>" + rtndata[i].CategoryName + "</td> <td>" + rtndata[i].PhotoTeamGroupName + "</td><td>"
+ rtndata[i].PhotoStatus + "</td><td>" + rtndata[i].AllocateTaskTime + "</td></tr>";
$("#contentTable").append(tmpTr);
}
$("#pager").pager({ pagenumber: data.currentPage, pagecount: data.totalPage, buttonClickCallback: PageClick });
}
catch (e) {
$("#pager").pager({ pagenumber: 1, pagecount: 0, buttonClickCallback: PageClick });
alert(data);
}
}
- 分页控件-Jquery-MVC
- MVC 自动分页控件
- .NET MVC 分页控件
- JQuery 分页控件
- JQuery - 分页控件 JPaginate
- jquery 分页控件
- Jquery异步分页控件
- ASP.NET MVC 分页控件
- Asp.net MVC 分页控件
- jquery 插件之分页控件
- jquery 分页控件实现代码
- jquery分页展示控件:kkpager
- jquery分页展示控件 kkpager
- 基于JQuery 的分页控件
- 通用jQuery分页控件:jQuery Pagination plugin
- asp.net mvc 分页控件:HtmlHelper扩展
- asp.net mvc 分页用户控件
- mvc Pager 分页控件的使用
- 关于C#序列化一些简单示例
- LiveWrite配置CSDN
- linux下常用的关机/重启命令shutdown、halt、reboot、init
- 用 Visual C++ 2008 Express 编译你的第一个 wxWidgets 程序
- 给虚拟机上的linux扩容
- 分页控件-Jquery-MVC
- 编写 makefile 方法
- GCC、ARM-LINUX-GCC、ARM-ELF-GCC浅析【转】
- Android基础之ExpandableListActivity
- C# 遍历textboxs 绑定相应数据txt1~txtn
- 将字符串中“/t”替换为四个空格
- .Net/C#应用程序直接读取本地Cookies文件(由于WinXPSP2调用API:InternetGetCookie无果)
- as3读取xml中CDATA的方法
- 苹果全系列手持设备参数