pagebar.css
#pagenav{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}
#pagenav a{display:inline-block; height:22px; margin:0 2px; padding:0 8px; text-decoration:none; border:solid 1px #dbe5ee; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; background:#fff; color:#333; font:normal 12px/22px Arial, Helvetica, sans-serif; cursor:pointer;}
#pagenav a:hover{height:24px; margin:0 3px; border:none; background:#C00; color:#fff; line-height:24px; text-decoration:none;}
#pagesize{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}
#sort {clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}
頁面上使用分頁
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="我的ORM項目.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表頁面</title>
<link href="css/pagebar.css" rel="stylesheet" />
<style type="text/css" >
table th, td { border:1px solid #000000 }
</style>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--搜索條件-->
<div>
value1:<input id="SearchValue1" type="text" />
value2:<input id="SearchValue2" type="text" />
value3:<input id="SearchValue3" type="text" />
<input id="Search" type="button" value="搜索" />
<input id="Reset" type="button" value="重置" />
<input id="add" type="button" value="新增"/>
</div>
<div>
<!--表格-->
<table>
<thead>
<th>字段1</th><th>字段2</th><th>字段3</th><th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--分頁控件-->
<div id="Pagenation" class="contentstyle" style="MARGIN: 20px 0px; TEXT-ALIGN: left">
<p id="pagenav"></p>
<p id="pagesize"></p>
<p id="sort">
<select id="SelectColumn">
<option value="ID" selected="selected">ID</option>
<option value="Value1">Value1</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
</select>
<select id="SelectDesc">
<option value="asc">asc</option>
<option value="desc">desc</option>
</select>
</p>
</div>
</body>
var pagemodel = {
CurrentPage:1,PageSize:5
};
var sort1 = "ID";
var sort2 = "asc";
var searchEntity = { Value1: "", Value2: "", Value3: "" };
var selectedEntity = {};
$(function () {
init();
});
function init() {
getList();
$("#Search").bind("click", function () {
searchEntity.Value1 = $("#SearchValue1").val();
searchEntity.Value2 = $("#SearchValue2").val();
searchEntity.Value3 = $("#SearchValue3").val();
getList();
});
$("#Reset").bind("click", function () {
searchEntity.Value1 = "";
searchEntity.Value2 = "";
searchEntity.Value3 = "";
$("#SearchValue1").val("");
$("#SearchValue2").val("");
$("#SearchValue3").val("");
getList();
});
$("#add").bind("click", function () {
window.location.href = "WebForm2.aspx?action=add";
});
$("#pagenav").on("click", ".PageNumber", function () {
pagemodel.CurrentPage = parseInt($(this).attr("pagenumber"));
getList();
});
$("#pagesize").on("change", "#SelectPageSize", function () {
pagemodel.PageSize = parseInt($("#SelectPageSize option:selected").val());
getList();
});
$("#SelectColumn").bind("change", function () {
sort1 = $("#SelectColumn option:selected").val();
getList();
});
$("#SelectDesc").bind("change", function () {
sort2 = $("#SelectDesc option:selected").val();
getList();
});
$("tbody").on("click", ".edit", function () {
selectedEntity = JSON.parse(decodeURIComponent($(this).parent().parent().parent().attr("dataentity")));
window.location.href = "WebForm2.aspx?action=edit&id=" + selectedEntity.ID;
})
.on("click", ".delete", function () {
selectedEntity = JSON.parse(decodeURIComponent($(this).parent().parent().parent().attr("dataentity")));
if(window.confirm("你確定要刪除該行數據嗎？")){
$.ajax({
type: 'POST',
url: "Controller/Handler1.ashx",
async: true,
data: "function=DeleteModel"
+ "&target=" + encodeURIComponent(JSON.stringify(selectedEntity)),
dataType: 'json',
success: function (jsonObj) {
if (jsonObj.success) {
getList();
} else {
window.alert(jsonObj.msg);
}
}
});
}
});
}
function getList() {
$.ajax({
type: 'POST',
url: "Controller/Handler1.ashx",
async: true,
data: "function=GetList"
+ "&target=" + encodeURIComponent(JSON.stringify(searchEntity))
+ "&pagemodel=" + encodeURIComponent(JSON.stringify(pagemodel))
+"&sort1="+sort1+"&sort2="+sort2
,
dataType: 'json',
success: function (jsonObj) {
if (jsonObj.success) {
$("tbody").empty();
var editbutton = "<input class=\"edit\" type=\"button\" value=\"編輯\">";
var deletebutton = "<input class=\"delete\" type=\"button\" value=\"刪除\">";
var buttons = "<div>"
+ editbutton
+deletebutton
+ "</div>";
for (var i = 0; i < jsonObj.data.length; i++) {
var dataentityurl = encodeURIComponent(JSON.stringify(jsonObj.data[i]));
$("<tr dataentity='" + dataentityurl + "'>"
+ "<td>"
+jsonObj.data[i].Value1
+ "</td>"
+ "<td>"
+ jsonObj.data[i].Value2
+ "</td>"
+ "<td>"
+ jsonObj.data[i].Value3
+ "</td>"
+ "<td>"
+buttons
+ "</td>"
+"</tr>").appendTo($("tbody"));
}
assemblingPagenation(jsonObj.pagemodel);
} else {
window.alert(jsonObj.msg);
}
}
});
}
//拼裝分頁
function assemblingPagenation(pageModel) {
var min = 1;
if (pageModel.CurrentPage - 5 > 1) {
min = pageModel.CurrentPage - 5;
}
var max = min + 9;
if (max > pageModel.MaxPage) {
max = pageModel.MaxPage;
}
$("#pagenav").empty();
for (var i = min; i <= max; i++) {
if (i == pageModel.CurrentPage) {
$("<span>" + i + "</span>").appendTo($("#pagenav"));
} else {
$("<a href=\"javascript:;\" class=\"PageNumber\" pagenumber=\"" + i + "\">" + i + "</a>").appendTo($("#pagenav"));
}
}
$("#pagesize").empty();
$("<span> 第"
+ pageModel.CurrentPage
+ "頁/共"
+ pageModel.MaxPage
+ "頁 每頁</span>").appendTo($("#pagesize"));
$("<select id=\"SelectPageSize\">"
+ "<option value=\"5\" >5</option>"
+ "<option value=\"10\" selected=\"selected\">10</option>"
+ "<option value=\"15\" >15</option>"
+ "</select>條").appendTo($("#pagesize"));
$("#SelectPageSize").val(pageModel.PageSize);
$("<span> 共"
+ pageModel.DataCount
+ "條</span>").appendTo($("#pagesize"));
}