启动客户端分页

      最近在看jQuery基础教程，书中一些Demo自己拿来敲敲，顺便巩固下基础基础知识： 客户端分页

 

效果：

 

      

 

        

 

javascript代码：

 $("table.sortable tbody tr:odd").addClass('odd');
            $("table.sortable tbody tr:even").addClass('even');

            //作为fn的一个属性来调用，此时使用jQuery对象就可以调用
            jQuery.fn.alternateRowColors = function () {
                $('tbody  tr:odd', this).removeClass("even").addClass('odd');
                $('tbody  tr:even', this).removeClass('odd').addClass('even');
            }


            $("table.sortable").each(function () {
                var $table = $(this);
                var currentPage = 0;
                var numPerPage = 3;
                var repagination = function () {
                    $table.find("tbody tr").hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
                }

                var numRows = $table.find("tbody tr").length;
                var numPages = Math.ceil(numRows / numPerPage);

                var $pager = $("<div class='pager'></div>");

                for (var page = 0; page < numPages; page++) {
                    $("<span class='page-number'></span>").text(page + 1)
                        .bind('click', { newPage: page }, function (event) {
                            currentPage = event.data['newPage'];
                            repagination();
                            $(this).addClass('active').siblings().removeClass('active');
                        })
                        .appendTo($pager);
                }

                repagination();
                $pager.insertAfter($table).find('span.page-number:first').addClass('active');
            });