常见分页步骤： Total: ? Page: ?/? Goto: ? | >|

常见分页步骤： Total: ? Page: ?/? Goto: ? |< < > >|

一、复制代码到指定的地方：

<div style="float:right" mce_style="float:right" > <table border="0" cellpadding="0" cellspacing="0" style="width:100%;" > <tr> <td style="width:100px;"> <span id="Pagination" style="display:none" mce_style="display:none"></span> Total: <span id="total" style="color: #1155BB" mce_style="color: #1155BB"></span> </td> <td style="width:100px;"> Page: <span id="page" style="color: #1155BB" mce_style="color: #1155BB"></span> </td> <td style="width:110px;"> Goto: <select id="selPager" οnchange="movePage(this.selectedIndex)" class="dataSelect"> <option value="1">1</option> </select> </td> <td style="width:110px;"> <span style="float:right;padding-right:5px;" mce_style="float:right;padding-right:5px;"> <img id="firstPage" class="pageImg" border="0" οnclick="movePage('first')" οnmοuseοver="this.src='/eClinic/ec/images/page_first_select.gif'" οnmοuseοut="this.src='/eClinic/ec/images/page_first.gif'" alt="First Page" src="/eClinic/ec/images/page_first.gif" mce_src="eClinic/ec/images/page_first.gif" /> <img id="previousPage" class="pageImg" border="0" οnclick="movePage('previous')"οnmοuseοver="this.src='/eClinic/ec/images/page_previous_select.gif'" οnmοuseοut="this.src='/eClinic/ec/images/page_previous.gif'" alt="Previous Page" src="/eClinic/ec/images/page_previous.gif" mce_src="eClinic/ec/images/page_previous.gif" /> <img id="nextPage" class="pageImg" border="0" οnclick="movePage('next')" οnmοuseοver="this.src='/eClinic/ec/images/page_next_select.gif'" οnmοuseοut="this.src='/eClinic/ec/images/page_next.gif'" alt="Next Page" src="/eClinic/ec/images/page_next.gif" mce_src="eClinic/ec/images/page_next.gif" /> <img id="lastPage" class="pageImg" border="0" οnclick="movePage('last')" οnmοuseοver="this.src='/eClinic/ec/images/page_last_select.gif'" οnmοuseοut="this.src='/eClinic/ec/images/page_last.gif'" alt="Last Page" src="/eClinic/ec/images/page_last.gif" mce_src="eClinic/ec/images/page_last.gif" /> </span> </td> </tr> </table> </div>

padding-right:5px;这个是为了右边留一点空而已。

样式

.pageImg{vertical-align:bottom;float:left;}

二、引入JS
<link href="/eClinic/include/pagination/pagination.css" rel="stylesheet" type="text/css" />
<script src="/eClinic/include/pagination/jquery.pagination.js" type="text/javascript"></script>

<mce:script type="text/javascript"><!-- //---------------------------------Pagination------------------------------------------------------ //initial Pagination var opts = { callback: pageselectCallback }; opts.items_per_page =100; //page load $(document).ready(function() { initialPage(); }) //initial page base info () function initialPage() { var url = "alertList.aspx?pageOp=getCount"; $.post(url, function(data, textStatus) { opts.recordCount = parseInt(data); opts.pageCount = Math.floor(opts.recordCount % opts.items_per_page == 0 ? opts.recordCount / opts.items_per_page : opts.recordCount / opts.items_per_page + 1); opts.current_page = 0; var htmlStr = ""; for (var i = 0; i < opts.pageCount; i++) { htmlStr += "<option value='" + i + "'>" + (i + 1) + "</option>"; } $("#selPager").html(htmlStr); $("#Pagination").pagination(data, opts); }); } //get page content function pageselectCallback(page_index, jq) { $("#total").text(opts.recordCount); $("#page").text(opts.pageCount == 0 ? "0/0" : (page_index + 1) + "/" + opts.pageCount); opts.current_page = page_index; $("#selPager").val(page_index); var url = "alertList.aspx?" + "pageOp=getList" + "&pageIndex=" + page_index + "&pageSize=" + opts.items_per_page; $.post(url, function(data) { $("#tbodyList").html(data); }); } //change select or click pagination function movePage(type) { var pageIdx = 0; if (type == "first") { pageIdx = 0; } else if (type == "previous") { pageIdx = opts.current_page == 0 ? 0 : opts.current_page - 1; } else if (type == "next") { pageIdx = opts.current_page == opts.pageCount - 1 ? opts.pageCount - 1 : opts.current_page + 1; } else if (type == "last") { pageIdx = opts.pageCount - 1; } else { pageIdx = type; } pageselectCallback(pageIdx, $("#Pagination")); } // --></mce:script>

三、页面后置代码。
#region [ Page Load ]
protected void Page_Load(object sender, EventArgs e)
{
//Set Privilege
SetPrivilege();

string action = Request["action"];
if ("delete" == action)
{
int id = Convert.ToInt32(Request["id"]);
alertService.DeletePcip_AlertByAlertId(id);
}
if (!string.IsNullOrEmpty(Request["pageOp"]))
{
GetPaginationData();
}
}

private void GetPaginationData()
{
string data = "";
switch (Request["pageOp"])
{
case "getCount":
data = alertService.GetNotDeletedCount().ToString();
break;
case "getList":
int pageIndex = Convert.ToInt32(Request["pageIndex"]);
int pageSize = Convert.ToInt32(Request["pageSize"]);
DataTable dt = alertService.GetNotDeletedDataTableByPageSizeAndIndex(pageSize, pageIndex);

StringBuilder sb = new StringBuilder();
foreach (DataRow dr in dt.Rows)
{
sb.Append(string.Format(@"<tr style='height:25px;' οndblclick='edit({0})' class='{1}'>",
dr["alertId"], Convert.ToInt32(dr["Enabled"]) == 1 ? "showBGYellow" : "showBGRed"));
sb.Append(string.Format(@"<td><input οnclick='' type='radio' name='rdoId' value='{0}' /></td>",dr["alertId"]));
sb.Append(string.Format(@"<td>{0}</td>",dr["Name"]));
sb.Append(string.Format(@"<td>{0}Clinics({1});{2}",
dr["DMDesc"].ToString().Trim() == "" ? "" : "Adhoc Query(" + dr["DMDesc"].ToString() + ");",
dr["ClinicCount"],
dr["OSName"].ToString().Trim()==""?"":"OrderSet("+dr["OSName"].ToString()+")"));
sb.Append(string.Format(@"<td>{0}</td>", dr["Format"]));
sb.Append(string.Format(@"<td>{0}</td>", dr["Description"]));
sb.Append(string.Format(@"<td>{0}</td>", dr["Criteria"]));
sb.Append(string.Format(@"<td>{0}</td>", dr["AdminNotes"]));
sb.Append(string.Format(@"<td>{0}</td>", GetDeployment(dr["Status"])));
sb.Append(string.Format(@"<td nowrap='nowrap'>{0}</td>", dr["dateCreated"]));
sb.Append(string.Format(@"<td align='center'>{0}</td>",Convert.ToInt32(dr["Enabled"])==1?"<img src=/"/eClinic/ec/images/select_hcfa.gif/">":"&nbsp;"));
sb.Append("</tr>");
}
data = sb.ToString();
break;
}
Response.Write(data);
Response.End();
}
#endregion

四、ServiceImpl
#region 4.3.3 分页:得到所有未删除的Pcip_Alert的个数
public int GetNotDeletedCount()
{
string sql = "select count(*) from Pcip_Alert where deleted=0";
return DbFactory.executeScalarInt(sql);
}
#endregion

#region 4.3.4 分页:根据pageSize和pageIndex得到所有未删除的Pcip_Alert的DataTable
public DataTable GetNotDeletedDataTableByPageSizeAndIndex(int pageSize, int pageIndex)
{
string sql =string.Format(@"
SELECT TOP {0} pa.*
FROM Pcip_Alert pa
WHERE pa.[Deleted] = 0
AND pa.AlertId NOT IN (SELECT TOP {1} pa2.AlertId
FROM Pcip_Alert pa2 where pa2.[Deleted] = 0
ORDER BY
pa2.AlertId DESC)
ORDER BY
pa.alertId DESC", pageSize,pageSize*pageIndex);
return DbFactory.getDataTableBySql(sql);
}
#endregion