var currentPageIndex = 0;
        $(document).ready(function()
        {
            var $table = $(".DataList1");
           // var numPerPage =10;

            //repagenate

            var repagenate = function()
            {
                $table.find("tbody table").show().filter(":lt('" + (currentPageIndex * numPerPage) + "')").hide().end().
                                            filter(":gt('" + ((currentPageIndex + 1) * numPerPage - 1) + "')").hide();

            }

            //create the pager
            var rowNum = $('tbody table', $table).length;
            var pageCount = Math.ceil(rowNum / numPerPage);
            var $pager = $('<div class="pager"></div>');
            var page = 0;
            var goPrev = function()
            {
                if (currentPageIndex == 0)
                    return false;
                var activePager = $(".active");
                activePager.prev().addClass("active");
                activePager.removeClass("active");
                currentPageIndex -= 1;
                repagenate();
            }

            var goNext = function()
            {
                if (currentPageIndex == (pageCount - 1))
                    return false;
                var activePager = $(".active");
                activePager.next().addClass("active");
                activePager.removeClass("active");
                currentPageIndex += 1;
                repagenate();
            }

           
           
           
            
            if (pageCount>=2)
            {    
                 var prevPager = $('<span class="prev"><上一頁</span>');
                 var nextPager = $('<span class="next">下一頁></span>');
                 prevPager.bind("click", goPrev);
                 prevPager.appendTo($pager);
                  while (page < pageCount) {

                $('<span class="page-number">' + (page + 1) + '</span>').
                                                        appendTo($pager).
                                                        addClass("clickable").
                                                        bind('click', { "newPage": page }, function(event)
                                                        {

                                                            currentPageIndex = event.data['newPage'];
                                                            $(this).addClass("active").siblings().removeClass("active");
                                                            repagenate();
                                                        });

                page++;
                }
                
                 nextPager.bind("click", goNext)
                 nextPager.appendTo($pager);
            }
           
           

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

            //pagenation code

            repagenate();
        });