基于JQuery的自定义分页控件

function mi(obj)
{
if (obj.className == "os"
|| obj.className == "js")
{
obj.className = "ListTableHoverRow";
}
}

function mo(obj)
{
if (obj.className == "ListTableHoverRow")
{
obj.className = (obj.rowIndex % 2 == 0 ? "js" : "os");
}
}

function clk(obj)
{
if (obj.className == "ListTableSelectedRow")
{
obj.className = (obj.rowIndex % 2 == 0 ? "os" : "js");
}
else
{
obj.className = "ListTableSelectedRow";
}
}

//clear table data
function Ajax_ClearTable()
{
for (var idx = ajax_GridView.rows.length - 1; idx >= 1; idx--)
{
ajax_GridView.deleteRow(idx);
}
}

//go to fixed page
function Ajax_GoPage()
{
var obj = document.getElementById("txtAjax_PageIndex");
var reg = new RegExp(getPattern("uint"));
if (!reg.test(obj.value))
{
alert("请输入正确的页码！");
obj.focus();
obj.select();
return;
}

if (parseInt(obj.value, 10) == 0)
{
obj.value = 1;
}
else if (parseInt(obj.value, 10) > ajax_TotalPageCount)
{
obj.value = ajax_TotalPageCount;
}

ajax_PageIndex = parseInt(obj.value, 10);

Ajax_DataBind();
}

//data bind
function Ajax_DataBind()
{
var headerRow = ajax_GridView.rows[0];
var headerCell;
//get data source
var dataSource = Ajax_SetDataSource();
if (dataSource == null)
{
return;
}

//clear table data
Ajax_ClearTable();

var row, cell, entity;
if (dataSource.length == 0)
{
ajax_TotalRecordsCount = 0;
}
for (var idx = 0; idx < dataSource.length; idx++)
{
entity = dataSource[idx];

row = ajax_GridView.insertRow();
row.className = ((idx + 1) % 2 == 0 ? "js" : "os");
row.onmouseover = function () { try { mi(this); } catch (ex) { } }
row.onmouseout = function () { try { mo(this); } catch (ex) { } }
row.onclick = function () { try { clk(this); } catch (ex) { } }
//IE9上不支持对象赋值个属性
//row.setAttribute("ItemData", entity);

//把每个字段的信息设置为行的属性，已便于后面的使用
for (var att in entity)
{
if (typeof (entity[att]) == "function")
{
continue;
}

row.setAttribute("Field_" + att, entity[att] == null ? "" : entity[att]);
}

for (var cellIndex = 0; cellIndex < headerRow.cells.length; cellIndex++)
{
headerCell = headerRow.cells[cellIndex];

cell = row.insertCell();
if (headerCell.attributes["Type"] != null && headerCell.attributes["Type"].value == "AutoSeq")
{
cell.className = "ListTableSeqCol";
cell.innerHTML = "<input type=\"hidden\"" + (headerCell.attributes["Type"] != null ? " value=\"" +
eval("entity." + headerCell.attributes["DataField"].value) : "") + "\" />" + (idx + 1 + (ajax_PageIndex - 1) * ajax_PerPageItemCount);
}
else
{
if (headerCell.attributes["DataField"] != null)
{
cell.innerText = (eval("entity." + headerCell.attributes["DataField"].value) == null ? "" : eval("entity." + headerCell.attributes["DataField"].value));
}
}

if (headerCell.attributes["ItemClass"] != null)
{
cell.className = headerCell.attributes["ItemClass"].value;
}
}

//get the total records count
if (idx == 0)
{
ajax_TotalRecordsCount = entity.RecordsCount;
}
}

if (ajax_GridView.attributes["OnRowDataBound"] != null)
{
eval(ajax_GridView.attributes["OnRowDataBound"].value);
}

Ajax_PagerBind();
}

//go to first page
function Ajax_FirstPage()
{
ajax_PageIndex = 1;
Ajax_DataBind();
}

//go to previous page
function Ajax_PreviousPage()
{
if (ajax_PageIndex == 1)
{
return;
}
ajax_PageIndex = ajax_PageIndex - 1;

Ajax_DataBind();
}

//go to next page
function Ajax_NextPage()
{
if (ajax_TotalPageCount == ajax_PageIndex)
{
return;
}

ajax_PageIndex = ajax_PageIndex + 1;

Ajax_DataBind();
}

//go to last page
function Ajax_LastPage()
{
ajax_PageIndex = ajax_TotalPageCount;
Ajax_DataBind();
}

//点击数字跳转
function Ajax_Number(number)
{
ajax_PageIndex = number;

Ajax_DataBind();
}

//bind pager
function Ajax_PagerBind()
{
//获取总页数
ajax_TotalPageCount = Math.ceil(ajax_TotalRecordsCount / ajax_PerPageItemCount);
document.getElementById("totalRecord").innerHTML = ajax_TotalRecordsCount + "条记录 "+ajax_PageIndex+"/" + ajax_TotalPageCount + "页";
if (ajax_TotalPageCount <= 1)
{
document.getElementById("divPager").style.display = "none";

document.getElementById("btnAjax_FirstPage").disabled = true;
document.getElementById("btnAjax_LastPage").disabled = true;
}
else if (ajax_PageIndex == 1)
{
document.getElementById("divPager").style.display = "block";

document.getElementById("btnAjax_FirstPage").disabled = true;
document.getElementById("btnAjax_LastPage").disabled = false;
}
else if (ajax_PageIndex == ajax_TotalPageCount)
{
document.getElementById("divPager").style.display = "block";

document.getElementById("btnAjax_FirstPage").disabled = false;
document.getElementById("btnAjax_LastPage").disabled = true;
}
else
{
document.getElementById("divPager").style.display = "block";

document.getElementById("btnAjax_FirstPage").disabled = false;
document.getElementById("btnAjax_LastPage").disabled = false;
}

//如果总页数 > 1 显示数据
if (ajax_TotalPageCount > 1)
{
document.getElementById("spn链接页数").innerHTML = "";

var displayPageLinkCount = 6; //显示页链接个数
var strartPageIndex = ajax_PageIndex - 3;
if (strartPageIndex + displayPageLinkCount - 1 > ajax_TotalPageCount)
{
strartPageIndex = ajax_TotalPageCount - displayPageLinkCount + 1;
}

if (strartPageIndex > 1)
{
document.getElementById("spn链接页数").innerHTML += "<span class=\"dian\">....</span>";
}
else
{
strartPageIndex = 1;
}

for (var idx = strartPageIndex; idx < strartPageIndex + displayPageLinkCount && idx <= ajax_TotalPageCount; idx++)
{
if (ajax_PageIndex == idx)
{
document.getElementById("spn链接页数").innerHTML += "<a href=\"javascript:Ajax_Number(" + idx + ")\" class=\"one\">" + idx + "</a>";
}
else
{
document.getElementById("spn链接页数").innerHTML += "<a href=\"javascript:Ajax_Number(" + idx + ")\" >" + idx + "</a>";
}
}

if (strartPageIndex + displayPageLinkCount - 1 < ajax_TotalPageCount)
{
document.getElementById("spn链接页数").innerHTML += "<span class=\"dian\">....</span>";
}
}

if (ajax_PageIndex == 1)
{
$("#spanFirstPage").attr("class", "xyy1disabled");
}
else
{
$("#spanFirstPage").attr("class", "xyy1");
}

if (ajax_PageIndex == ajax_TotalPageCount)
{
$("#spanLastPage").attr("class", "xyydisabled");
}
else
{
$("#spanLastPage").attr("class", "xyy");
}
}
</script>

基于JQuery的自定义分页控件

猜你喜欢