자바스크립트 페이징

자바스크립트로 페이징을 만들었는데, 다음에 또 사용할 기회가 생길까봐 메모해 둔다~

list_string 는 php의 리스트 array 배열이다.

1. list_string = $.parseJSON('<?=json_encode($new_data_all)?>');
2. list_total = parseInt("<?=sizeof($new_data_all)?>");
3. list_cnt = 6;
4. function get_list(pg_num)
5. {
6.     start = ( pg_num - 1 ) * list_cnt;
7.     string = "";
8.     cnt = 0;
9.     pcnt = 0;
10.     for(var key in list_string)
11.     {
12.         if(start <= cnt)
13.         {
14.             row_number = list_total - (list_cnt * (pg_num - 1)) - pcnt;
15.             row = list_string[key];
16.  
17.             out_x_class         = row['out_x_res']      == "pass" ? "" : "font_red";
18.             out_y_class         = row['out_y_res']      == "pass" ? "" : "font_red";
19.             out_avg_class       = row['out_avg_res']    == "pass" ? "" : "font_red";
20.             in_x_class          = row['in_x_res']       == "pass" ? "" : "font_red";
21.             in_y_class          = row['in_y_res']       == "pass" ? "" : "font_red";
22.             in_avg_class        = row['in_avg_res']     == "pass" ? "" : "font_red";
23.             dongsim_class       = row['dongsim_res']    == "pass" ? "" : "font_red";
24.             height_1_class      = row['height_1_res']   == "pass" ? "" : "font_red";
25.             height_2_class      = row['height_2_res']   == "pass" ? "" : "font_red";
26.             height_3_class      = row['height_3_res']   == "pass" ? "" : "font_red";
27.             height_4_class      = row['height_4_res']   == "pass" ? "" : "font_red";
28.             height_avg_class    = row['height_avg_res'] == "pass" ? "" : "font_red";
29.  
30.             string += "<tr>";
31.             string += "     <td class='text-center'>"+row_number+"</td>";
32.             string += "     <td class='text-center'>"+row['reg_date'].substring(2, 10)+" "+row['reg_time']+"</td>";
33.             string += "     <td class='text-center "+out_x_class+"'>"+row['out_x']+"</td>";
34.             string += "     <td class='text-center "+out_y_class+"'>"+row['out_y']+"</td>";
35.             string += "     <td class='text-center "+out_avg_class+"'>"+row['out_avg']+"</td>";
36.             string += "     <td class='text-center "+in_x_class+"'>"+row['in_x']+"</td>";
37.             string += "     <td class='text-center "+in_y_class+"'>"+row['in_y']+"</td>";
38.             string += "     <td class='text-center "+in_avg_class+"'>"+row['in_avg']+"</td>";
39.             string += "     <td class='text-center "+dongsim_class+"'>"+row['dongsim']+"</td>";
40.             string += "     <td class='text-center "+height_1_class+"'>"+row['height_1']+"</td>";
41.             string += "     <td class='text-center "+height_2_class+"'>"+row['height_2']+"</td>";
42.             string += "     <td class='text-center "+height_3_class+"'>"+row['height_3']+"</td>";
43.             string += "     <td class='text-center "+height_4_class+"'>"+row['height_4']+"</td>";
44.             string += "     <td class='text-center "+height_avg_class+"'>"+row['height_avg']+"</td>";
45.             string += "</tr>";
46.  
47.             pcnt++;
48.         }
49.  
50.         if(pcnt >= list_cnt){
51.             break;
52.         }
53.  
54.         cnt++;
55.     }
56.  
57.     if(string != ""){
58.         pghtml = paging(list_total, list_cnt, 10, pg_num);
59.         $("#pgbox").html(pghtml);
60.     }
61.     else{
62.         string += "<tr>";
63.         string += "     <td colspan='27' class='text-center'>데이터가 없습니다.</td>";
64.         string += "<tr>";
65.         $("#pgbox").html("");
66.     }
67.  
68.     $("#listbody").html(string);
69. }
70.  
71.  
72. // 목록 페이징
73. function paging(totalCnt, dataSize, pageSize, pageNo){
74.     totalCnt    = parseInt(totalCnt);   // 전체레코드수
75.     dataSize    = parseInt(dataSize);   // 페이지당 보여줄 데이타수
76.     pageSize    = parseInt(pageSize);   // 페이지 그룹 범위       1 2 3 5 6 7 8 9 10
77.     pageNo      = parseInt(pageNo);     // 현재페이지
78.  
79.     var html = new Array();
80.     if(totalCnt == 0){
81.         return "";
82.     }
83.  
84.     html.push("<nav>");
85.     html.push("     <ul class=\"pagination\" style='margin:0px;'>");
86.  
87.     // 페이지 카운트
88.     var pageCnt = totalCnt % dataSize;
89.     if(pageCnt == 0){
90.         pageCnt = parseInt(totalCnt / dataSize);
91.     }else{
92.         pageCnt = parseInt(totalCnt / dataSize) + 1;
93.     }
94.  
95.     var pRCnt = parseInt(pageNo / pageSize);
96.     if(pageNo % pageSize == 0){
97.         pRCnt = parseInt(pageNo / pageSize) - 1;
98.     }
99.  
100.     //이전 화살표
101.     if(pageNo > pageSize){
102.         var s2;
103.         if(pageNo % pageSize == 0){
104.             s2 = pageNo - pageSize;
105.         }else{
106.             s2 = pageNo - pageNo % pageSize;
107.         }
108.  
109.         html.push('<li><a aria-label="Previous" href=javascript:get_list("');
110.         html.push(s2);
111.         html.push('");>');
112.         html.push('<span aria-hidden="true">&laquo;</span>');
113.         html.push("</a></li>");
114.     }else{
115.         html.push('<li><a aria-label="Previous" href="#">\n');
116.         html.push('<span aria-hidden="true">&laquo;</span>');
117.         html.push('</a></li>');
118.     }
119.  
120.     //paging Bar
121.     for(var index=pRCnt * pageSize + 1;index<(pRCnt + 1)*pageSize + 1;index++){
122.         if(index == pageNo){
123.             html.push('<li class="active"><a href="javascript:void(0);">');
124.             html.push(index);
125.             html.push('</a></li>');
126.         }else{
127.             html.push('<li><a href=javascript:get_list("');
128.             html.push(index);
129.             html.push('");>');
130.             html.push(index);
131.             html.push('</a></li>');
132.         }
133.  
134.         if(index == pageCnt){
135.             break;
136.         }else{
137.             //html.push('|');
138.         }
139.     }
140.  
141.     //다음 화살표
142.     if(pageCnt > (pRCnt + 1) * pageSize){
143.         html.push('<li><a aria-label="Next" href=javascript:get_list("');
144.         html.push((pRCnt + 1)*pageSize+1);
145.         html.push('");>');
146.         html.push('<span aria-hidden="true">&raquo;</span>');
147.         html.push('</a></li>');
148.     }else{
149.         html.push('<li><a aria-label="Next" href="#">');
150.         html.push('<span aria-hidden="true">&raquo;</span>');
151.         html.push('</a></li>');
152.     }
153.     //console.log(html);
154.  
155.     html.push("     </ul>");
156.     html.push("</nav>");
157.  
158.     return html.join("");
159. }