我看了一个js给table分页的方法 我怎么调用这个方法？

[suollk]

http://blog.csdn.net/zhailulu/article/details/6672457


分页的代码在这里 我手打了一个table不知道在哪里调用 TablePage("#Table",15)这个方法


还有就是我后台写了一个数据库 然后读取数据库 再用表格的方式把数据库的内容显示出来了 也想调用这个方法 怎么调用？


而且我想知道我怎么给我的table前面弄个序号 就好像123456789 有8条记录序号就显示到8

[suollk]

怎么每次我的问题都没人回答 是太简单了吗

[義東]

试试在页面加载完后调用方法

[Trouble___Maker]

<style type="text/css">
 .page a{
  text-decoration:none;
}
  .page a span{
  padding:4px 16px 4px 16px;
  border:1px solid #AAAAEE;
  color: #1155BB;
  font-size:12px;
  font-weight:bold;
  font-family: 'helvetica neue', arial, sans-serif;
}

.page a span:hover,.click_page{
  background:#2266BB;
  color:#ffffff;
 }
</style>
<script type="text/javascript" src="JQuery/jquery-1.4a2.min.js"></script>
<script type="text/javascript">
function TablePage(id,size){
   var $table = $(id);
    var currentPage = 0;  //当前页
    var pageSize = size;  //每页行数（不包括表头）
    $table.bind("repaginate", function()
    {
       //console.log($table.find("tbody tr").eq(0));
      $table.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
     // $table.find("tbody tr").eq(0).show();
    });
    var numRows = $table.find("tbody tr").length;  //记录宗条数
    var numPages = Math.ceil(numRows/pageSize);    //总页数
    //console.log(numPages);
    var $pager = $("<div class='page'><a href='javascript:void(0)'><span id='Prev' style='margin-right:4px;'>« Prev</span></a></div>");  //分页div
    for( var page = 0; page < numPages; page++ )
    {

      //为分页标签加上链接
      //if(page==0){$("<a href='javascript:void(0)'><span id='1' class="click_page"></span></a>")}
      $("<a href='javascript:void(0)'><span id='"+(page+1)+"'>"+ (page+1) +"</span></a>")
           .bind("click", { "newPage": page }, function(event){
                currentPage = event.data["newPage"];
                //console.log($(this).children("span"));
                $(this).children("span").attr("class","click_page");
                $(this).children("span").css({"color":"#FFFFFF"});
                $(".page a span").not($(this).children("span")).attr("class","");
                $(".page a span").not($(this).children("span")).css({"color":"#1155BB"});
                $table.trigger("repaginate");
            })
            .appendTo($pager);

        $pager.append("  ");
    }
    //$table.trigger("repaginate");
    var next=$("<a href='javascript:void(0)'><span id='Next'>Next »</span></a>");
    $pager.append(next);
    $pager.insertAfter($table);//分页div插入table
    $("#1").attr("class","click_page");
    $("#1").css({"color":"#FFFFFF"});
    $table.trigger("repaginate");
    //console.log($("#1"));
    //$("#1").attr("class","click_page");
    //$("#1").css({"background":"#FFFFFF"});
    $("#Prev").bind("click",function(){
       var prev=Number($(".click_page").text())-2;
       currentPage=prev;
       $(this).css({"background":"#000000"});
       if(currentPage<0) {
         $(this).css({"background":"#c0c0c0"});
         return;
 }
       $("#"+(prev+1)).attr("class","click_page");
       $("#"+(prev+1)).css({"color":"#FFFFFF"});
       $(".page a span").not($("#"+(prev+1))).attr("class","");
       $(".page a span").not($("#"+(prev+1))).css({"color":"#1155BB"});
       //console.log(currentPage);
       $table.trigger("repaginate");
    });
     $("#Next").bind("click",function(){
       var next=$(".click_page").attr("id");
       currentPage=Number(next);
       //console.log($(".click_page").text());
       $(this).css({"background":"#FFFFFF"});
       if((currentPage+1)>numPages) {
         $(this).css({"background":"#c0c0c0"});
         return;
         }
       $("#"+(currentPage+1)).attr("class","click_page");
       $("#"+(currentPage+1)).css({"color":"#FFFFFF"});
       $(".page a span").not($("#"+(currentPage+1))).attr("class","");
       $(".page a span").not($("#"+(currentPage+1))).css({"color":"#1155BB"});
       $table.trigger("repaginate");
    });
    
 }



</script>

<table id="tbl">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</table>

<script type="text/javascript">
TablePage("#tbl",5); 
</script>

[Trouble___Maker]

亲测，OK的说！！！