//globals var targetArray = new Array(); var shelterDiv; var recordSetDiv; var numberOfShelters; var totalPages; var currentPage = 1; var shelterPageSize = 4; var nextShelterIndex = 0; //fake it till you make it. var fakeArray = new Array(); fakeArray.push(["Antioch City Animal Services", "PO Box 5007", "Antioch", "CA", "94531-5007", "www.link.com/path/path", "mailto:me@anAdress.com","www.test.com" ]); fakeArray.push(["Butte Humane Society", "PO Box 5007", "Antioch", "CA", "94531-5007", "null", "mailto:me@anAdress.com","www.test.com" ]); fakeArray.push(["Calaveras County Animal Services", "PO Box 5007", "Antioch", "CA", "94531-5007", "null", "mailto:me@anAdress.com","www.test.com" ]); addEvent(window, "load", initShelterTable); function initShelterTable() { //shelters[] is an array that is written into the of the JSP that includes this file //the array is a Java List data type that is converted into a JS array targetArray = shelters; //targetArray = fakeArray; shelterDiv = document.getElementById("shelter_rows"); recordSetNav = document.getElementById("recordNav"); recordSetNav.style.display = 'none'; numberOfShelters = targetArray.length; totalPages = Math.ceil(numberOfShelters/shelterPageSize); //hide or show pagination as needed if(totalPages<2 || !numberOfShelters) { hidePagination(); //if there is only one page, still build the tables, but no need for pagination if(totalPages == 1)loadShelterRows(); } else { showPagination(); //load shelters loadShelterRows(); } } function loadShelterRows() { //remove any previous shelters so we have a clean div to work with killChildren(shelterDiv); var lastIndex = nextShelterIndex; var lastIndexInPage = Number(lastIndex + shelterPageSize); for (var i=lastIndex; i < Number(lastIndex + shelterPageSize); i++) { //show pagination recordSetNav.style.display = ""; //create a table if(i < numberOfShelters) { createShelterTable(i, shelterDiv, targetArray[i]); nextShelterIndex = i+1; } } } function hidePagination() { var recordSetNav = document.getElementById("recordNav"); recordSetNav.style.display = 'none'; } function showPagination() { var recordSetNav = document.getElementById("recordNav"); //create recordset nav var myPrevPageLink = document.createElement("A"); var myPrevPageURL = "javascript:onPageChange('prev')"; myPrevPageLink.setAttribute("href", myPrevPageURL); myPrevPageLink.setAttribute("id", "prevPageLink"); myPrevPageLink.setAttribute("class", "off"); myPrevPageLink.setAttribute("className", "off"); myPrevPageLink.innerHTML = "<< Prev Page"; //add anchor for prev recordSetNav.appendChild(myPrevPageLink); var pagesToNextRow = 20; //add anchors for pages for(var r=0; r= 0) { pagesToNextRow-=1; } var myPageLink = document.createElement("A"); var myURL = "javascript:onPageChange('" + Number(r+1) +"')"; myPageLink.setAttribute("href", myURL); myPageLink.setAttribute("id", "recordsetPage_"+ Number(r+1)) myPageLink.setAttribute("class", "off"); myPageLink.setAttribute("className", "off"); if(pagesToNextRow > 0) { myPageLink.innerHTML = String(Number(r+1)); } else { myPageLink.innerHTML = String("
"+Number(r+1)); pagesToNextRow = 20; } recordSetNav.appendChild(myPageLink); } //add anchor for next var myNextPageLink = document.createElement("A"); var myNextPageURL = "javascript:onPageChange('next')"; myNextPageLink.setAttribute("href", myNextPageURL); myNextPageLink.setAttribute("id", "nextPageLink"); myNextPageLink.setAttribute("class", "off"); myNextPageLink.setAttribute("className", "off"); myNextPageLink.innerHTML = "Next Page >>"; recordSetNav.appendChild(myNextPageLink); //show it recordSetNav.style.display = ''; var myPageLink = document.getElementById("recordsetPage_"+currentPage); myPageLink.setAttribute("class", "on"); myPageLink.setAttribute("className", "on"); } function createShelterTable(index, srcHolder, dataObj) { var myTable = document.createElement("table"); var myTbody = document.createElement("tbody"); myTable.className = index%2 == 0? "odd" : "even"; myTable.border = 0; myTable.width = 575; myTable.cellspacing = 0; myTable.cellpadding = 2; //create TH tags so we can maintain column widths var myTH1 = document.createElement("th"); myTH1.width=50; var myTH2 = document.createElement("th"); myTH2.width=225; var myTH3 = document.createElement("th"); myTH3.width=100; var myTH4 = document.createElement("th"); myTH4.width=100; var myTH5 = document.createElement("th"); myTH5.width=100; //the TH tag above does not resolve the fixed width col issue, //so going with spacer gif hack. var spacerGIF1 = document.createElement("img"); spacerGIF1.setAttribute("src", "images/spacer.gif"); spacerGIF1.setAttribute("name", "spacer1"); spacerGIF1.setAttribute("id","spacer1"); var spacerGIF2 = document.createElement("img"); spacerGIF2.setAttribute("src", "images/spacer.gif"); spacerGIF2.setAttribute("name", "spacer2"); spacerGIF2.setAttribute("id","spacer2"); var spacerGIF3 = document.createElement("img"); spacerGIF3.setAttribute("src", "images/spacer.gif"); spacerGIF3.setAttribute("name", "spacer3"); spacerGIF3.setAttribute("id","spacer3"); var spacerGIF4 = document.createElement("img"); spacerGIF4.setAttribute("src", "images/spacer.gif"); spacerGIF4.setAttribute("name", "spacer4"); spacerGIF4.setAttribute("id","spacer4"); var spacerGIF5 = document.createElement("img"); spacerGIF5.setAttribute("src", "images/spacer.gif"); spacerGIF5.setAttribute("name", "spacer5"); spacerGIF5.setAttribute("id","spacer5"); var col1 = document.createElement("td"); spacerGIF1.style.width= "50px"; spacerGIF1.style.height= "1px"; col1.appendChild(spacerGIF1); var col2 = document.createElement("td"); spacerGIF2.style.width= "225px"; spacerGIF2.style.height= "1px"; col2.appendChild(spacerGIF2); var col3 = document.createElement("td"); spacerGIF3.style.width= "100px"; spacerGIF3.style.height= "1px"; col3.appendChild(spacerGIF3); var col4 = document.createElement("td"); spacerGIF4.style.width= "100px"; spacerGIF4.style.height= "1px"; col4.appendChild(spacerGIF4); var col5 = document.createElement("td"); spacerGIF5.style.width= "100px"; spacerGIF5.style.height= "1px"; col5.appendChild(spacerGIF5); var mySpacerRow = document.createElement("tr"); mySpacerRow.appendChild(col1); mySpacerRow.appendChild(col2); mySpacerRow.appendChild(col3); mySpacerRow.appendChild(col4); mySpacerRow.appendChild(col5); var myRow = document.createElement("tr"); myTable.appendChild(myTbody); myTable.appendChild(myTH1); myTable.appendChild(myTH2); myTable.appendChild(myTH3); myTable.appendChild(myTH4); myTable.appendChild(myTH5); myTbody.appendChild(mySpacerRow); myTbody.appendChild(myRow); var myRecordNumberCell = document.createElement("td"); //myRecordNumberCell.width = 50; myRecordNumberCell.innerHTML = "" + Number(index+1) + ""; myRow.appendChild(myRecordNumberCell); var myAddressCell = document.createElement("td"); //dataObj[1] + "&city=" + dataObj[2] + "&state=" + dataObj[3] + "&zip=" + dataObj[4] if(dataObj[1] == null || dataObj[1] == "null") dataObj[1] = ""; if(dataObj[2] == null || dataObj[2] == "null") dataObj[2] = ""; if(dataObj[3] == null || dataObj[3] == "null") dataObj[3] = ""; if(dataObj[4] == null || dataObj[4] == "null") dataObj[4] = ""; if(dataObj[5] == null || dataObj[5] == "null") dataObj[5] = ""; //myAddressCell.width = 200; myAddressCell.innerHTML = "" + dataObj[0] + "
" + dataObj[1] + "
" + dataObj[2] + " " + dataObj[3] + "
" + dataObj[4]+ "
" + dataObj[5]; myRow.appendChild(myAddressCell); var numberOfLinksInRow = 3; //create a column for each link for(var a=0; a 2) { currentPage--; nextShelterIndex = shelterPageSize * currentPage - shelterPageSize; var myPageLink = document.getElementById("recordsetPage_"+currentPage); myPageLink.setAttribute("className", "on"); myPageLink.setAttribute("class", "on"); } else { currentPage = 1; var myPageLink = document.getElementById("recordsetPage_"+currentPage); myPageLink.setAttribute("className", "on"); myPageLink.setAttribute("class", "on"); nextShelterIndex = 0; } loadShelterRows(); } function onPageChange(pageIndex) { for(var ii=1; ii<=totalPages; ii++) { try { var myPageLink = document.getElementById("recordsetPage_"+ii); myPageLink.setAttribute("class", "off"); myPageLink.setAttribute("className", "off"); } catch(e) { alert("only one page! " + e); } } if(pageIndex != "next" && pageIndex != "prev") { var myLink = document.getElementById("recordsetPage_" +pageIndex); myLink.setAttribute("class","on"); myLink.setAttribute("className","on"); } if(pageIndex == "next") { onNextPageChange(); return; } if(pageIndex == "prev") { onPrevPageChange(); return; } if(pageIndex != currentPage) { if(pageIndex > 1) { currentPage = pageIndex; nextShelterIndex = shelterPageSize * currentPage - shelterPageSize; } else { currentPage = 1; nextShelterIndex = 0; } loadShelterRows(); } } function killChildren(parent) { while(parent.firstChild) { // delete all nodes parent.removeChild(parent.firstChild); } } function addEvent(elm, evType, fn, useCapture) // addEvent and removeEvent { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { alert("Handler could not be removed"); } }