shababhsiddique shababhsiddique - 1 month ago 13
Ajax Question

Giving simple js pagination to a Ajax generated table

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 Source

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.