728x90

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('');
        });

    });
}
 





블로그 이미지

Link2Me

,