为Ajax生成的表提供简单的js分页

时间:2012-10-21 05:53:29

标签: javascript ajax drupal pagination html-table

我在drupal中有一个ajax调用,它会在我点击的位置生成并带回整个表。表很大,所以我希望它们分页。我没有时间进行服务器端分页,我也需要在很多地方应用它。

我发现这个http://code.google.com/p/one-simple-table-paging/非常容易使用,应该可以解决我的目的。

我设法在静态html页面中使用它:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="oneSimpleTablePaging-1.0.js"></script>

<table class="tableToPaginate">
    <tr>
        <th>Id</th><th>Name</th>
    </tr>
        <?php for ($i = 0; $i < 100; $i++) { ?>                            
        <tr>
            <td><?php echo $i ?></td><td><?php echo "name" . $i ?></td>
        </tr>                        
        <?php } ?>
</table>

<script>
   $(document).ready(function(){
       $('.tableToPaginate').oneSimpleTablePagination({rowsPerPage: 20});
   });        
</script>

但当我使用相同的技术为我的ajax生成的表给他们相同的类并在page.tpl中调用脚本时,php我看不到分页

echo '<table id="ajaxcustomerdata" class="account_info tableToPaginate">';
.....

我是ajax和js的新手;请帮帮我。

1 个答案:

答案 0 :(得分:2)

为此目的使用DataTables javascript插件 - 非常强大且简单的jQuery插件。

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": '../ajax/sources/arrays.txt'
    } );
} );

或者你可以turn usual html table to DataTable table

$(document).ready(function() {
    $('#example').dataTable();
} );

More info on this example