Creates a paged view of any html table
Table Pager
// JScript File
// Example usage of this class :
// var myPager = new TablePager();
// myPager.mDestElem = document.getElementById("vs");
// myPager.mDestPageNavigator = document.getElementById("vs2");
// myPager.mTableData = document.getElementById("mine").outerHTML;
// myPager.InitializeComponents();
// myPager.CreatePage(0);
function TablePager()
{
// temporary container to parse Table string to dom
this.mContainer;
// html table string
this.mTableData;
// dom table
this.mTable;
// number of rows in the table
this.mTableRowsCount;
// where to insert paged table
this.mDestElem;
// number of rows per page
this.mPageSize = 7;
// number of pages
this.mPageCount;
// index of page
this.mPageIndex;
// where to insert navigation control
this.mDestPageNavigator;
// remainder of rows
this.mRemainder;
// the paged table
this.mTempTable;
this.InitializeComponents = function()
{
this.mContainer = document.createElement("div");
this.mContainer.innerHTML = this.mTableData;
this.mTable = this.mContainer.firstChild;
this.mTableRowsCount = this.mTable.rows.length;
this.mRemainder = this.mTableRowsCount % this.mPageSize;
this.mPageCount = (this.mTableRowsCount - this.mRemainder) / this.mPageSize + 1;
this.CreateNavigator();
}
this.CreateNavigator = function()
{
var selectBox = "<select onchange='myPager.CreatePage(this.value)'>";
for (var a = 0; a < this.mPageCount; a++)
{
selectBox += "<option value=" + a + ">" + a + "</option>";
}
selectBox += "</select>";
this.mDestPageNavigator.innerHTML = selectBox;
}
this.CreatePage = function(PageIndex)
{
this.mPageIndex = PageIndex;
this.mTempTable = this.mTable.cloneNode(false);
if(this.mTableRowsCount < this.mPageSize)
throw("Page Size can not be bigger than rows count");
if(this.mPageIndex >= this.mPageCount)
throw("Page Index can not be bigger or equal to page count");
if(this.mPageIndex == (this.mPageCount -1))
{
for(var i = (this.mPageIndex * this.mPageSize); i < ((this.mPageIndex * this.mPageSize) + this.mRemainder); i++)
{
var myRow = this.mTable.rows[i].cloneNode(true);
this.mTempTable.appendChild(myRow);
}
this.mDestElem.innerHTML = this.mTempTable.outerHTML;
return;
}
for (var i = (this.mPageIndex * this.mPageSize); i < ((parseInt(this.mPageIndex) +1) * this.mPageSize); i++)
{
var myRow = this.mTable.rows[i].cloneNode(true);
this.mTempTable.appendChild(myRow);
}
this.mDestElem.innerHTML = this.mTempTable.outerHTML;
}
}
serkan sendur 821 Postaholic Banned Featured Poster
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.