Javascript기반의 Pagination

1. Jquery 에서 사용
 - 다운 로드 : http://plugins.jquery.com/project/pagination
 - 사용 소스

 <script type="text/javascript">

        function pageselectCallback(page_id, jq){

                $('#Searchresult').text("Showing search results "

                 +((page_id*10)+1)+"-"+((page_id*10)+10));

        }

        $(document).ready(function(){ // Create pagination element

                $("#Pagination").pagination(300, {

                        num_edge_entries: 2,

                        num_display_entries: 8,

                        callback: pageselectCallback

                });


                // Set handler for setting pagination options via form

                $("#setoptions").click(function(){

                        var opt = {callback: pageselectCallback};

                        $("input[@type=text]").each(function(){

                                opt[this.name] = this.className.match

                                (/numeric/)?parseInt(this.value):this.value;

                        });

                        // extract maxitems

                        var maxitems = opt.maxitems;

                        delete opt.maxitems;

                        // Avoid html injections in this demo

                        var htmlspecialchars =

                         { "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}

                        $.each(htmlspecialchars, function(k,v){

                                opt.prev_text = opt.prev_text.replace(k,v);

                                opt.next_text = opt.next_text.replace(k,v);

                        })

                        $("#Pagination").pagination(maxitems, opt);

                });


        });

</script>

  - 데모 : http://www.mimul.com/examples/pagenation/demo.htm

2. 일반 Javascript에서 사용
 - 사용 소스

 function Pager(tableName, itemsPerPage) {

    this.tableName = tableName;

    this.itemsPerPage = itemsPerPage;

    this.currentPage = 1;

    this.pages = 0;

    this.inited = false;


    this.showRecords = function(from, to) {

        var rows = document.getElementById(tableName).rows;

        // i starts from 1 to skip table header row

        for (var i = 1; i < rows.length; i++) {

            if (i < from || i > to)

                rows[i].style.display = 'none';

            else

                rows[i].style.display = '';

        }

    }


    this.showPage = function(pageNumber) {

        if (! this.inited) {

                alert("not inited");

function Pager(tableName, itemsPerPage) {

    this.tableName = tableName;

    this.itemsPerPage = itemsPerPage;

    this.currentPage = 1;

    this.pages = 0;

    this.inited = false;


    this.showRecords = function(from, to) {

        var rows = document.getElementById(tableName).rows;

        // i starts from 1 to skip table header row

        for (var i = 1; i < rows.length; i++) {

            if (i < from || i > to)

                rows[i].style.display = 'none';

            else

                rows[i].style.display = '';

        }

    }


    this.showPage = function(pageNumber) {

        if (! this.inited) {

                alert("not inited");

                return;

        }


        var oldPageAnchor = document.getElementById('pg'+

           this.currentPage);

        oldPageAnchor.className = 'pg-normal';


        this.currentPage = pageNumber;

        var newPageAnchor = document.getElementById('pg'+

          this.currentPage);

        newPageAnchor.className = 'pg-selected';


        var from = (pageNumber - 1) * itemsPerPage + 1;

        var to = from + itemsPerPage - 1;

        this.showRecords(from, to);

    }


    this.prev = function() {

        if (this.currentPage > 1)

            this.showPage(this.currentPage - 1);

    }


    this.next = function() {

        if (this.currentPage < this.pages) {

            this.showPage(this.currentPage + 1);

        }

    }


    this.init = function() {

        var rows = document.getElementById(tableName).rows;

        var records = (rows.length - 1);

        this.pages = Math.ceil(records / itemsPerPage);

        this.inited = true;

    }


    this.showPageNav = function(pagerName, positionId) {

        if (! this.inited) {

                alert("not inited");

                return;

        }

        var element = document.getElementById(positionId);


        var pagerHtml = '<span onclick="' + pagerName +

          '.prev();" class="pg-normal"> &#171 Prev </span> | ';

        for (var page = 1; page <= this.pages; page++) 

         pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' 

            + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';

        pagerHtml += '<span onclick="'+

         pagerName+'.next();" class="pg-normal"> Next &#187;</span>';


        element.innerHTML = pagerHtml;

    }

}

 - 데모 : http://www.mimul.com/examples/pagenation/paging.html