jQuery tablesorter& pager插件无法正常工作

时间:2012-06-25 13:53:36

标签: jquery pagination html-table tablesorter

我正在努力让jQuery tablesorter的寻呼机工作。 没有寻呼机一切正常,但是当我试图使用寻呼机出错时。

当我不将寻呼机的限制从10更改为5或2时,排序和分页都不起作用。然后它显示了一个空表。但是当我事先改变限制时一切正常吗?!那不是应该的样子,对吗? ^^

jquery的:

   <script>
    $(document).ready(function(){
        var validator = $("#searchForm").validate({ 

        });         
    });

    $(document).ready(function() 
    { 
        $("#myTable")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")}); 
    });

表:

// name of database dable == header of table
                echo "<table id=\"myTable\"     class=\"tablesorter\"><thead><tr>";
                foreach( sqlsrv_field_metadata($stmt) as     $fieldMetadata)
                {
                       echo "<th>".$fieldMetadata   ['Name']."</th>";
                }
                echo "<th>Details</th>";
                echo "</thead>";
                echo "<tbody>";
                // printing table rows
                while($row = sqlsrv_fetch_array($stmt,    SQLSRV_FETCH_ASSOC))
                {                                   
                    echo "<tr>";

                    // $row is array... foreach( .. ) puts every element    
                    // of $row to $cell variable    
                    foreach($row as $cell){
                        echo "<td>$cell</td>";
                    }
                    echo "</tr>\n";
                }
                echo "</tbody>";
                echo "</table>";    
                echo("<br>");

寻呼机:

 <div id="pager" class="pager">
                    <form>
                        <img     src="/images/first.png" class="first"/>
                        <img     src="/images/prev.png" class="prev"/>
                        <input type="text"    class="pagedisplay"/>
                        <img   src="/images/next.png" class="next"/>
                        <img    src="/images/last.png" class="last"/>
                        <select class="pagesize">
                            <option   value="">>LIMIT</option>
                            <option value="2">2 per page</option>
                            <option value="5">5 per page</option>
                            <option value="10">10 per page</option>                             
                        </select>
                    </form>
                </div>      

1 个答案:

答案 0 :(得分:1)

在第一次调用帮助中指定10?

$(document).ready(function() 
{ 
    $("#myTable")
    .tablesorter({widthFixed: true, widgets: ['zebra']})
    .tablesorterPager({container: $("#pager"), size: 10}); 
});