Question

I have a ajax call in drupal which generates and brings back a entire table right under where I click. The tables are large, so I want them paginated. I don’t have time for server side pagination and I also need to apply it in a lot of places.

I found this http://code.google.com/p/one-simple-table-paging/ a very easy to use one and should solve my purpose.

I managed to use it in static html pages:

<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>

but when I use the same technique for my ajax generated tables giving them the same class and calling the script in page.tpl, php I don’t see the pagination

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

I am new with ajax and js; please help me out.

Answer 1

Use DataTables javascript plugin for this purpose — very powerfull and simple jQuery plugin.

Adding pagginated AJAX table is just a:

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

Or you can turn usual html table to DataTable table:

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

More info on this example.