js 페이징에대해서 질문드립니다.공대여신님

1
저는 이제 js 페이징 구현을 마쳤고 이제 리스트와 페이지 간에 연동을하려고합니다.. 저에게 처해진 상황은 이제 리스트 넘버를 누를시에 url페이지가 변경되지 않고 다른페이지(1->2,) 하려고 하는데 방법론적이나 어떻게 구현해야될지 정말 막막합니다...도움이 될만한 답변이나 추가해주시면 정말 감사하겠습니다... 참고페이지로는(http://sidekick.epfl.ch/index/page/4/sort/name/order/asc)와(http://www.jobkorea.co.kr/) 가 있습니다.

페이지 안에 리스트에는20개정도의(
https://www.kickstarter.com/projects/221959177/2017-equine-fine-art-wall-calendar/
https://www.kickstarter.com/projects/2065125522/the-short-story-mixtape-mixing-mediums/
https://www.kickstarter.com/projects/bingcomedycrawl/binghamton-comedy-crawl-2017/)들이 들어갈 예정입니다..ㅠㅠ
부탁드립니다ㅠㅠㅠ구글에서나 네이버에서나 찾아봐도 정보가 많이 없는거 같아요ㅠ




<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    div {
        color: #aaa;
        font-size: 15pt;
        font-weight: normal;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none;

    }
    </style>
    <script type="text/javascript">
    // 페이지 목록 나타내기
    // 총 레코드수, 페이지당 게시물수,보여줄 페이지 갯수, 현재 페이지를 파라미터로 받습니다.
    function getPaging(totalrecords, numofrows, blocksize, currentpage) {
        var paging = document.all.paging_area; // 페이지 목록이 뿌려질 곳
        paging.innerHTML = '';
        var totalpages = Math.ceil(totalrecords / numofrows); // 총페이지수
        var blockpage = 0; // 1,11,21,...각 블럭 들의 첫페이지 1~10 까지가 한블럭
        //블럭의 첫번째 페이지 구하기
        blockpage = Math.floor((currentpage - 1) / blocksize);
        blockpage = blockpage * blocksize + 1;
        //이전페이지
        if (currentpage > 1) {
            paging.insertAdjacentHTML("beforeEnd", " <span style='cursor:Pointer;' onClick='goPage(" + totalrecords + "," + numofrows + "," + blocksize + "," + (currentpage - 1) + ")' title='이전페이지'>Previous</span> ");
        }
        //처음페이지
        paging.insertAdjacentHTML("beforeEnd", " <span style='cursor:Pointer;' onClick='goPage(" + totalrecords + "," + numofrows + "," + blocksize + "," + (1) + ")' title='처음페이지'>First </span> ");
        //페이지리스트, blockpage++
        for (i = 1; i <= blocksize; i++, blockpage++) {
            // 마지막 페이지와 같다면
            if (blockpage == totalpages) i = blocksize + 1; // 이러면 다음차례에는 for문을 빠져나감
            // 블럭페이지와 현재페이지가 같으면 링크없다.
            if (blockpage == currentpage)
                paging.insertAdjacentHTML("beforeEnd", " <span><b>|" + blockpage + "|</b></span> ");
            else
                paging.insertAdjacentHTML("beforeEnd", " <span style='cursor:Pointer;' onClick='goPage(" + totalrecords + "," + numofrows + "," + blocksize + "," + blockpage + ")'>" + blockpage + "</span> ");
        }
        //다음페이지
        if (currentpage < totalpages) {
            paging.insertAdjacentHTML("beforeEnd", " <span style='cursor:Pointer;' onClick='goPage(" + totalrecords + "," + numofrows + "," + blocksize + "," + (currentpage + 1) + ")' title='다음페이지'> Next </span> ");
        }
        //마지막페이지
        paging.insertAdjacentHTML("beforeEnd", " <span style='cursor:Pointer;' onClick='goPage(" + totalrecords + "," + numofrows + "," + blocksize + "," + (totalpages) + ")' title='마지막페이지'> Last </span> ");
        paging.insertAdjacentHTML("beforeEnd", " <span>[" + currentpage + "/" + totalpages + "]</span> ");
    }

    // 원하는 주소로 이동시켜주는 함수
    function goPage(totalrecords, numofrows, blocksize, i) {
        // 원하는 주소를 적기
        getPaging(totalrecords, numofrows, blocksize, i);
    }
    </script>
</head>

<body>
    <div id="paging_area"></div>
    <script>
    getPaging(1000, 10, 10, 1);
    </script>
    <script type="text/javascript">
    function check() {
        if (document.search.keyWord.value == '') {
            alert('검색어를 입력하세요');
            document.search.keyWord.focus();
            return false;
        }
    }
    </script>
    <form name="search" method="get" action="a.jsp" onsubmit="return check()">
        <table width="200" border="0" align="left" style="padding-left: 20px">
            <tr>
                <td align="center" valign="bottom">
                    <select name="keyField">
                        <option value="subject">Title</option>
                        <option value="writer">Name</option>
                        <option value="content">Content</option>
                    </select>
                </td>
                <td>
                    <input type="text" size="25" name="keyWord">
                </td>
                <td>
                    <input type="submit" value="Searching">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
mins
ㅇㅇ
나그네
나그네
홍길동
팡주안드개발
안녕
공부 3
안녕
안녕
길고양이
안녕