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 a very easy to use one and should solve my purpose.

I managed to use it in static html pages:

<script src=""></script>
<script src="oneSimpleTablePaging-1.0.js"></script>

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

$('.tableToPaginate').oneSimpleTablePagination({rowsPerPage: 20});

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() {
} );

More info on this example.