하단 페이징에 페이지 입력창 넣기 정보
하단 페이징에 페이지 입력창 넣기
첨부파일
본문
안녕하세요..
가끔 페이징에 다른 페이지에 이동을 하려고 해도
예) 11페이지로 이동을 할려면, 10페이지 먼저 클릭 후 다음페이지로 클릭해야 이동...
이런 경우가 있어서 약간의 팁으로 수정을 해 보았습니다.
1. 먼저 common.lib.php 를 약간 수정 합니다.
한글 표시는 전부 feather-icon으로 대체 하였습니다.
// 한페이지에 보여줄 행, 현재페이지, 총페이지수, 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 "";
}
2. 해당 list.skin.php 에서
만약 feather.js가 없으시면
<script src="<?php echo $board_skin_url ?>/feather.js"></script>
하시고,js파일을 다운로드 후 저장하시면 됩니다.
<!-- 페이지 -->
<?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>
=>완성된 페이징은 그림처럼 되어집니다.
추천
14
14
댓글 12개
오! 유용한자료네요
고맙습니다. ㅎㅎ
감사합니다 d
감사합니다.
감사합니다.
페이징 css 는 다른 사이트에서 복사하여 사용하기 때문에 오픈해도 될지 모르겠습니다....그래서 여기에는 별도로 표기는 하지 않았습니다. 데모 페이지를 참조하시면 비슷한 css를 찾아 보실수 있습니다.
관리자 페이지 - 환경설정 - 기본환경 - 페이지 표시 수 10을 5로 하셔도
이 팁 그대로 적용이 잘됩니다. 이동 후 변경된 입력 기본값은 보여지는 페이지 끝 +1 이 됩니다.
관리자 페이지 - 환경설정 - 기본환경 - 페이지 표시 수 10을 5로 하셔도
이 팁 그대로 적용이 잘됩니다. 이동 후 변경된 입력 기본값은 보여지는 페이지 끝 +1 이 됩니다.
유용하네요 감사합니다.
많이 멋지십니다!!
왕 초보가 감사드립니다! 그런데 혹시 제글을 보실지는 모르겠지만
input박스 안에 숫자들어가있을때 엔터키 치면 안먹히더라구요
버튼을 누르면 이용이되고..혹시 언제고 시간나시면 한번 봐주십사 하고
input박스 안에 숫자들어가있을때 엔터키 치면 안먹히더라구요
버튼을 누르면 이용이되고..혹시 언제고 시간나시면 한번 봐주십사 하고
안녕하세요...
엔터를 하시게 되면 동작이 안됩니다.
$('#goinput').change(function(){}
jquery change 기능을 이용하기 때문인데...
즉 이동할 페이지수가 변경되었을때만 동작됩니다.
그냥 엔터시 동작하게되면 기능이 얽힐수 있습니다.'
그리고 여기에 Enter를 동작시키기 위해 키입력시 감지를 걸어줘야 합니다.
엔터를 하시게 되면 동작이 안됩니다.
$('#goinput').change(function(){}
jquery change 기능을 이용하기 때문인데...
즉 이동할 페이지수가 변경되었을때만 동작됩니다.
그냥 엔터시 동작하게되면 기능이 얽힐수 있습니다.'
그리고 여기에 Enter를 동작시키기 위해 키입력시 감지를 걸어줘야 합니다.
아하!!! *.* 그렇군요! 말씀하신걸 토대로 해보는데
제가 jquery 내용을 잘 몰라서~한참을 헤맸어요~
그누 구버전 이라서 그런지 어디서 연관된지는 모르겠지만 엔터를 치면 페이지이동은 안되지만 삭제할거냐는 문구가 뜨면서 삭제쪽이랑 연관이 되는 현상이 있어서
엔터를 지정해주려고 event.keyCode=='13' 로 엔터감지를 해보는데도 잘 안먹히더라구요
그래서
$('input[type="text"]').keydown(function() {
if (event.keyCode === 13) {
event.preventDefault();
};
});
값으로 엔터를 아에 막아놨는데..혹시나 저처럼 왕초보가 저같은 일을 겪게된다면
엔터를 막아놓는게 더 나을거 같다라는....
미터강님 조언 캄사합니다~~ 그리고 만드신 팁도 아주 자랑스럽게 잘 사용하겠습니다
제가 jquery 내용을 잘 몰라서~한참을 헤맸어요~
그누 구버전 이라서 그런지 어디서 연관된지는 모르겠지만 엔터를 치면 페이지이동은 안되지만 삭제할거냐는 문구가 뜨면서 삭제쪽이랑 연관이 되는 현상이 있어서
엔터를 지정해주려고 event.keyCode=='13' 로 엔터감지를 해보는데도 잘 안먹히더라구요
그래서
$('input[type="text"]').keydown(function() {
if (event.keyCode === 13) {
event.preventDefault();
};
});
값으로 엔터를 아에 막아놨는데..혹시나 저처럼 왕초보가 저같은 일을 겪게된다면
엔터를 막아놓는게 더 나을거 같다라는....
미터강님 조언 캄사합니다~~ 그리고 만드신 팁도 아주 자랑스럽게 잘 사용하겠습니다
한가지 더 첨언을 드리면,
이 팁은 페이징 중에 특정한 페이지로 바로 가기 위한 것 입니다.
그래서 엔터를 눌러서 페이지를 이동하게 된다면 현재 페이지에서
어떤 글을 링크하였을때... 좀 꼬일듯 합니다.
특정 subject를 클릭하고 들어갔는데 중간에 엔터를 입력시에 리스트페이지 이동을한다면...
좀 그렇죠... 아마 이게 뭐냐고 말이죠..
이 팁은 페이징 중에 특정한 페이지로 바로 가기 위한 것 입니다.
그래서 엔터를 눌러서 페이지를 이동하게 된다면 현재 페이지에서
어떤 글을 링크하였을때... 좀 꼬일듯 합니다.
특정 subject를 클릭하고 들어갔는데 중간에 엔터를 입력시에 리스트페이지 이동을한다면...
좀 그렇죠... 아마 이게 뭐냐고 말이죠..
