i need to implement pagination in my project..i m using struts2..in my jsp page im implementing pagination using javascript...it is showing error as 'rows is undefined'...i tried the same with sample its working fine..if i implement in my application it is showing error..
Expand|Select|Wrap|Line Numbers
- <style type="text/css">
- .pg-normal {
- color: #0000FF;
- font-weight: normal;
- text-decoration: none;
- cursor: pointer;
- }
- .pg-selected {
- color: #800080;
- font-weight: bold;
- text-decoration: underline;
- cursor: pointer;
- }
- </style>
- <script type="text/javascript">
- function Pager(tableName, itemsPerPage) {
- this.tableName = tableName;
- this.itemsPerPage = itemsPerPage;
- this.currentPage = 1;
- this.pages = 0;
- this.inited = false;
- 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[i].style.display = 'none';
- else
- rows[i].style.display = '';
- }
- }
- 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;
- 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.prev = function() {
- if (this.currentPage > 1)
- this.showPage(this.currentPage - 1);
- }
- this.next = function() {
- if (this.currentPage < this.pages) {
- this.showPage(this.currentPage + 1);
- }
- }
- 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 = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';
- for (var page = 1; page <= this.pages; page++)
- pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
- pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
- element.innerHTML = pagerHtml;
- }
- }
- </script><table id="manage" border="1" width="100%" class="headertable" cellpadding="0" cellspacing="0">
- <thead>
- <tr>
- <th align="left">
- ContentID
- </th>
- <th align="left">
- Title
- </th>
- <th align="left">
- Description
- </th>
- <th align="left">
- Charge
- </th>
- <th align="left">
- Rating
- </th>..and the code goes on at the end of form
- </table>
- <div id="pageNavPosition"></div>
- </s:form>
- <script type="text/javascript"><!--
- var pager = new Pager('manage', 3);
- pager.init();
- pager.showPageNav('pager', 'pageNavPosition');
- pager.showPage(1);
- //--></script>