001.var search;
002.
003.var searchdiv;
004.var perPage = 3;
005.
006.var geo = {
007. "geonames": [{
008. "lng": -99.12766456604,
009. "geonameId": 3530597,
010. "countrycode": "MX",
011. "name": "Mexiko-Stadt",
012. "fclName": "city, village,...",
013. "toponymName": "Mexico City",
014. "fcodeName": "capital of a political entity",
015. "wikipedia": "en.wikipedia.org/wiki/Mexico_City",
016. "lat": 19.428472427036,
017. "fcl": "P",
018. "population": 12294193,
019. "fcode": "PPLC"
020. }, {
021. "lng": 116.397228240967,
022. "geonameId": 1816670,
023. "countrycode": "CN",
024. "name": "Peking",
025. "fclName": "city, village,...",
026. "toponymName": "Beijing",
027. "fcodeName": "capital of a political entity",
028. "wikipedia": "en.wikipedia.org/wiki/Beijing",
029. "lat": 39.9074977414405,
030. "fcl": "P",
031. "population": 11716620,
032. "fcode": "PPLC"
033. }, {
034. "lng": 116.397228240967,
035. "geonameId": 1816670,
036. "countrycode": "CN",
037. "name": "Peking",
038. "fclName": "city, village,...",
039. "toponymName": "Beijing",
040. "fcodeName": "capital of a political entity",
041. "wikipedia": "en.wikipedia.org/wiki/Beijing",
042. "lat": 39.9074977414405,
043. "fcl": "P",
044. "population": 11716620,
045. "fcode": "PPLC"
046. }, {
047. "lng": 116.397228240967,
048. "geonameId": 1816670,
049. "countrycode": "CN",
050. "name": "Peking",
051. "fclName": "city, village,...",
052. "toponymName": "Beijing",
053. "fcodeName": "capital of a political entity",
054. "wikipedia": "en.wikipedia.org/wiki/Beijing",
055. "lat": 39.9074977414405,
056. "fcl": "P",
057. "population": 11716620,
058. "fcode": "PPLC"
059. }, {
060. "lng": 116.397228240967,
061. "geonameId": 1816670,
062. "countrycode": "CN",
063. "name": "Peking",
064. "fclName": "city, village,...",
065. "toponymName": "Beijing",
066. "fcodeName": "capital of a political entity",
067. "wikipedia": "en.wikipedia.org/wiki/Beijing",
068. "lat": 39.9074977414405,
069. "fcl": "P",
070. "population": 11716620,
071. "fcode": "PPLC"
072. }, {
073. "lng": 120.9822,
074. "geonameId": 1701668,
075. "countrycode": "PH",
076. "name": "Manila",
077. "fclName": "city, village,...",
078. "toponymName": "Manila",
079. "fcodeName": "capital of a political entity",
080. "wikipedia": "en.wikipedia.org/wiki/Manila",
081. "lat": 14.6042,
082. "fcl": "P",
083. "population": 10444527,
084. "fcode": "PPLC"
085. }]
086.};
087.
088.$(function () {
089. searchdiv = $("#searchdiv");
090.
091. searchdiv.pagination({
092. itemsOnPage: perPage,
093. cssStyle: "light-theme",
094. onPageClick: function (pageNumber) {
095. var showFrom = perPage * (pageNumber - 1);
096. var showTo = showFrom + perPage;
097.
098. search.hide()
099. .slice(showFrom, showTo).show();
100. }
101. });
102.
103. updateItems();
104.
105. var data = geo.geonames;
106.
107. for (var i = 0; i < data.length; i++) {
108. var tr = $('<tr class=geoname/>');
109.
110. if (data[i].geonameId) {
111. tr.append("<td id=''>" + data[i].name + "</td>");
112. tr.append("<td id=''>" + data[i].countrycode + "</td>");
113. tr.append("<td id=''>" + data[i].lng + "</td>");
114. tr.append("<td id=''>" + data[i].lat + "</td>");
115. tr.append("<td id=''>" + data[i].population + "</td>");
116. tr.append("<td id=''>" + data[i].geonameId + "</td>");
117. tr.append("<td id=''>" + "<a class=geonameview id=" + data[i].geonameId + " href='#' >View Details</a>" + "</td>");
118. }
119.
120. $("#geonames > tbody").append(tr);
121. }
122.
123. updateItems();
124.
125. $("button.dontprint").click(function () {
126. var rows = $("#geonames > tbody > tr");
127.
128.
129. for (var i = 0; i < rows.length; i += 3) {
130. var table = $("<table class=pagebreak />");
131. table.append("<thead />");
132. table.find("thead").append($("#headerRow").clone());
133. table.append("<tbody />");
134. table.find("tbody").append($(rows[i]).clone());
135. table.find("tbody").append($(rows[i + 1]).clone());
136. table.find("tbody").append($(rows[i + 2]).clone());
137.
138. $("#printme").append(table);
139. }
140.
141. window.print();
142. $("#printme").empty();
143. });
144.});
145.
146.function updateItems() {
147. search = $(".geoname");
148. searchdiv.pagination("updateItems", search.length);
149. var page = Math.min(
150. searchdiv.pagination("getCurrentPage"),
151. searchdiv.pagination("getPagesCount")
152. );
153.
154. searchdiv.pagination("selectPage", page);
155.}
Quote:
