Web 프로그램/js, jQuery
jQuery Paging 처리 (진행중....)
Link2Me
2019. 1. 20. 09:50
jQuery Paging 처리를 완벽하게 한 것은 아니지만 PHP 와 연동하여 기본적인 처리를 하도록 만들어봤다.
함수는 재귀호출이 가능하다는 점을 활용했다.
https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp 에 Bootstrap 4 Pagination 에 대한 기본 설명이 잘 나왔다. Pagination 은 HTML 코드의 <ul>태그와 <li>태그를 활용하여 모양이 예쁜 Pagination 이 만들어진다.
보통 jQuery 와 연동되는 Pagination 처리에서는 href="#" 으로 해서 해당 URL로 연결되지 않고 jQuery 코드상에서 처리한다.
PHP 코드와 잘 연계하여 Paging 이 처리되는 함수를 만든 다음에 jQuery 와 연동하면 코드를 크게 고려하지 않고도 잘 만들 수 있을 거 같다.
function BBSListTable(where,keyword,curPage){
$('#panel_content').load('BBSList.php?where='+where+'&keyword='+keyword+'&p='+curPage, function() {
var curPage = $('#paging .act a').text();
$('#paging li').click(function(e) {
e.preventDefault();
switch($(this).text()){
case '◁':
curPage=parseInt($(this).next().text()) - 1;
break;
case '▷':
curPage=parseInt($(this).prev().text()) + 1;
break;
default:
curPage = $(this).text();
break;
}
BBSListTable(where,keyword,curPage); // 재귀호출 가능
});
$('#BBSHome').click(function(e){
e.preventDefault();
BBSListTable('','','',1);
});
$('#BBSSearch').click(function(e){
var where = $('[name=where]').val();
var keyword = $('[name=keyword]').val();
if(keyword =='' || keyword == 'undefined'){
alert('검색어를 입력하세요');
$('input[name=keyword]').focus();
return false;
}
BBSListTable(where,keyword,1);
});
// 검색어 초기화
$('#BBSKeywordReset').click(function(){
$('input[name=keyword]').val('');
});
});
} |