<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Expires" content="-1"/>
<meta name="keywords" content="my sidekick"/>
<meta name="description" content="my sidekick"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="login.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="shortcut icon" href="" />
<script type="text/javascript" language="javascript" src=""> </script>
<script type="text/javascript" language="javascript" src="example.js"></script>
<script type="text/javascript">
function click1() {
var str1 = document.getElementById("tablepaging");
while (str1.rows.length > 0) {
str1.deleteRow(str1.rows.length - 1);
}
var nI = 0;
var oListTableRow = str1.insertRow(0);
var oListTableCell = oListTableRow.insertCell(0);
var str = str + "<table border='0' cellpadding='0' cellspacing='0' class='TableSpacing' style='width:1000px;'>";
str = str + "<tr style=' background-color:Gray;border: 1px solid #000000; ' >";
str = str + "<th> Description </th>";
str = str + "<th> date Created </th>";
str = str + "<th> Total:150 </th>";
str == str + "</tr>"
for (tr = 0; tr <= 10; tr++) {
str = str + "<tr style=' background-color:gray;'>";
str = str + '<td> Short Description </td>'
str = str + '<td> Dated:CCYY-MM-DD HH:MM:SS </td>'
str = str + '<td> Edit </td>'
str = str + '</tr>'
}
str = str + '</table>'
str1.innerHTML = str;
/*
var perpage = 5;
var rowscount = tablepaging.rows.length;
alert(rowscount);
var pagenumber = Math.ceil(rowscount / perpage);
alert(pagenumber);
/*
var div1 = document.getElementById("divnumber");
for (i = 0; i < pagenumber; i++) {
var pagerHtml = pagerHtml + '<span class="page">' + i + '</span>';
}
div1.innerHTML=pagenumber;
*/
var pager = new Pager('tablepaging', 5);
pager.init();
pager.showPageNav('pager', 'tbllist');
pager.showPage(1);
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.page = 1;
this.pages = 0;
this.inited = false;
this.showPage = function(pageNumber) {
if (!this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg' + this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
alert(pageNumber);
var newPageAnchor = document.getElementById('pg' + this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows
.style.display = 'none';
else
rows.style.display = '';
alert(rows);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (!this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<table > <tr> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<td id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</td> ';
pagerHtml += '</tr ></table>';
element.innerHTML = pagerHtml;
}
}
}
</script>
<style type="text/css">
#wrapper {
width: 996px;
height:100%;
overflow: auto;
margin-right:2px;
}
#first {
float: left;
width: 167px;
height: 156px;
}
#second {
margin: 0 0 0 181px;
height: 100%;
width: 806px;
padding-bottom:0px;
padding: 0px;
}
table
{
margin:auto auto auto 0px;
padding:0;
border-spacing:0 1px;
border-collapse:separate;
text-align:left;
vertical-align:top;
height: 21px;
width: 775px;
top: 0px;
left: 0px;
}
td
{
}
</style>
</head>
<body onload="click1()" >
<div align="center"
style="border: 1px solid #000000; height: 100%; width:1000px; margin-left:180px; margin-top:80px; right: auto;">
<table style="width: 100%; height: 116px; background-color: #CCCCCC;">
<tr>
<td style="width:400px;
height:90px;
font-family:Arial Rounded MT Bold;
font-size:3em;
color:black;
text-align:left;
" >
Estate Living</td>
<td style=" width:50px;
height:90px;
font-family:Arial;
font-size:14px;
color: Black;
text-align:center;
vertical-align:bottom;
cursor:pointer;">
logout</td>
</tr>
</table>
<div id="wrapper" style="height: 100%">
<div id="first" style="height: 100%" >
<table style="width: 95%; height: 151px;">
<tr>
<td style="background-image: url('NewsMenu.png'); border:solid 1px black;">
</td>
</tr>
</table>
</div>
<div id="second">
<table id="tablepaging" style=" border-collapse:separate;border-spacing: 0 8px; height: 100%;"
border="0" cellpadding="0" cellspacing="0" class="" align="center">
<tr>
<td>
</td>
</tr>
</table>
<table id="tbllist" border="0" cellspacing="0" cellpadding="0" align="center" width ="2px" >
<tr>
<td style="border: 1px solid #000000; width: 2px; height: 5px"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace