하단 페이징에 페이지 입력창 넣기
안녕하세요..
가끔 페이징에 다른 페이지에 이동을 하려고 해도
예) 11페이지로 이동을 할려면, 10페이지 먼저 클릭 후 다음페이지로 클릭해야 이동...
이런 경우가 있어서 약간의 팁으로 수정을 해 보았습니다.
1. 먼저 common.lib.php 를 약간 수정 합니다.
한글 표시는 전부 feather-icon으로 대체 하였습니다.
[code]
// 한페이지에 보여줄 행, 현재페이지, 총페이지수, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$url = preg_replace('#(&)?page=[0-9]*#', '', $url);
$url .= substr($url, -1) === '?' ? 'page=' : '&page=';
$str = '';
if ($cur_page > 1) {
$str .= '<a href="'.$url.'1'.$add.'" class="pg_page pg_start" title="Go to 1"><i data-feather="chevrons-left"></i></a>'.PHP_EOL;
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
if ($cur_page > 1) $str .= '<a href="'.$url.($cur_page-1).$add.'" class="pg_page pg_prev" title="Go to '.($cur_page-1).'"><i data-feather="chevron-left"></i></a>'.PHP_EOL;
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= '<a href="'.$url.$k.$add.'" class="pg_page">'.$k.'<span class="sound_only">Page</span></a>'.PHP_EOL;
else
$str .= '<span class="sound_only">열린</span><strong class="pg_current">'.$k.'</strong><span class="sound_only">Page</span>'.PHP_EOL;
}
}
if ($cur_page < $total_page) $str .= '<a href="'.$url.($cur_page+1).$add.'" class="pg_page pg_next" title="Go to '.($cur_page+1).'"><i data-feather="chevron-right"></i></a>'.PHP_EOL;
if ($cur_page < $total_page) {
$str .= '<a href="'.$url.$total_page.$add.'" class="pg_page pg_end" title="Go to '.$total_page.'"><i data-feather="chevrons-right"></i></a>'.PHP_EOL;
}
if ($total_page > 10) { //2022-08-29 추가
if ($k >= $total_page) $k = $total_page;
$str .= ' GO ';
$str .= '<input type="text" id="goinput" class="pg_page" style="width: 40px;background:white;" value="'.$k.'" >';
$str .= '<a href="'.$url.$k.'" id="gotopg" class="pg_page"><i data-feather="skip-forward"></i></a>'.PHP_EOL;
}
if ($str)
return "<nav class=\"pg_wrap\"><span class=\"pg\">{$str}</span></nav>";
else
return "";
}
[/code]
2. 해당 list.skin.php 에서
만약 feather.js가 없으시면
<script src="<?php echo $board_skin_url ?>/feather.js"></script>
하시고,js파일을 다운로드 후 저장하시면 됩니다.
[code]
<!-- 페이지 -->
<?php echo $write_pages; ?>
<script>
feather.replace(); //feather 아이콘 사용
$(function(){
$(document).tooltip(); //페이징 처음,마지막에서 툴팁
});
</script>
<script>
$(function(){
$('#goinput').change(function(){ // 입력(페이지) 변할 때
var page = $(this).val(); //입력 받은 페이지
var href = $('#gotopg').attr('href'); //링크의 이전 주소
var goto = href.replace(/&page=[0-9]*/gi,'&page=') + page; // 이동페이지의 값을 입력 받은 페이지로 변경
//console.log(page,href,goto)
$('#gotopg').attr('href',goto); // a 클릭시 이동후 초기값 변경 : 마지막페이지 + 1
})
});
</script>
[/code]
=>완성된 페이징은 그림처럼 되어집니다.
댓글 12개
관리자 페이지 - 환경설정 - 기본환경 - 페이지 표시 수 10을 5로 하셔도
이 팁 그대로 적용이 잘됩니다. 이동 후 변경된 입력 기본값은 보여지는 페이지 끝 +1 이 됩니다.
input박스 안에 숫자들어가있을때 엔터키 치면 안먹히더라구요
버튼을 누르면 이용이되고..혹시 언제고 시간나시면 한번 봐주십사 하고
엔터를 하시게 되면 동작이 안됩니다.
$('#goinput').change(function(){}
jquery change 기능을 이용하기 때문인데...
즉 이동할 페이지수가 변경되었을때만 동작됩니다.
그냥 엔터시 동작하게되면 기능이 얽힐수 있습니다.'
그리고 여기에 Enter를 동작시키기 위해 키입력시 감지를 걸어줘야 합니다.
제가 jquery 내용을 잘 몰라서~한참을 헤맸어요~
그누 구버전 이라서 그런지 어디서 연관된지는 모르겠지만 엔터를 치면 페이지이동은 안되지만 삭제할거냐는 문구가 뜨면서 삭제쪽이랑 연관이 되는 현상이 있어서
엔터를 지정해주려고 event.keyCode=='13' 로 엔터감지를 해보는데도 잘 안먹히더라구요
그래서
$('input[type="text"]').keydown(function() {
if (event.keyCode === 13) {
event.preventDefault();
};
});
값으로 엔터를 아에 막아놨는데..혹시나 저처럼 왕초보가 저같은 일을 겪게된다면
엔터를 막아놓는게 더 나을거 같다라는....
미터강님 조언 캄사합니다~~ 그리고 만드신 팁도 아주 자랑스럽게 잘 사용하겠습니다
이 팁은 페이징 중에 특정한 페이지로 바로 가기 위한 것 입니다.
그래서 엔터를 눌러서 페이지를 이동하게 된다면 현재 페이지에서
어떤 글을 링크하였을때... 좀 꼬일듯 합니다.
특정 subject를 클릭하고 들어갔는데 중간에 엔터를 입력시에 리스트페이지 이동을한다면...
좀 그렇죠... 아마 이게 뭐냐고 말이죠..
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4415 | ||
| 2514 | 1년 전 | 902 | ||
| 2513 |
베리소프트
|
1년 전 | 619 | |
| 2512 |
|
1년 전 | 949 | |
| 2511 |
|
1년 전 | 1078 | |
| 2510 | 1년 전 | 1007 | ||
| 2509 | 1년 전 | 1057 | ||
| 2508 | 1년 전 | 1308 | ||
| 2507 | 1년 전 | 686 | ||
| 2506 | 1년 전 | 1253 | ||
| 2505 |
|
1년 전 | 1208 | |
| 2504 | 1년 전 | 1409 | ||
| 2503 | 1년 전 | 944 | ||
| 2502 | 1년 전 | 1070 | ||
| 2501 | 1년 전 | 1170 | ||
| 2500 |
welcome
|
1년 전 | 1078 | |
| 2499 |
하늘그루터기
|
1년 전 | 871 | |
| 2498 | 1년 전 | 1177 | ||
| 2497 | 1년 전 | 646 | ||
| 2496 | 1년 전 | 966 | ||
| 2495 |
|
1년 전 | 1418 | |
| 2494 | 1년 전 | 946 | ||
| 2493 | 1년 전 | 947 | ||
| 2492 | 1년 전 | 1155 | ||
| 2491 | 1년 전 | 1120 | ||
| 2490 | 1년 전 | 1090 | ||
| 2489 | 1년 전 | 1019 | ||
| 2488 | 1년 전 | 774 | ||
| 2487 |
|
1년 전 | 1212 | |
| 2486 | 1년 전 | 830 | ||
| 2485 | 1년 전 | 1007 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기