PClib demo site

<?elements
class grid name "productlist" singlepage
string ID
string TITLE skip
string productCode lb "Product code"
string productName lb "Product name"
string productLine lb "Productline"
string productVendor lb "Vendor"
pager pager pglen "10" ul
?>
<h2>{TITLE}</h2>
<div id="end-list" class="alert alert-info alert-fixed-top" style="display:none">Everything is shown.</div>
<table class="table table-striped table-hover">
<thead>
<tr>{grid.labels}</tr>
</thead>
<tbody id="results_ajax">
{BLOCK results}
{BLOCK items}
<tr>{grid.fields}</tr>
{/BLOCK}
{/BLOCK}
</tbody>
</table>
<a href="javascript: void(0)" id="show_next" class="btn btn-default">Next page...</a>

<script type="text/javascript">
var lastPage = 1;

function loadNextPage()
{
lastPage++;
$.get('?r=mobilegrid&action=nextpage&page='+lastPage, function(data){
if (!data) { $("#end-list").fadeIn().delay(1000).fadeOut(); lastPage--;}
else $("#results_ajax").append(data);
});
}

function init()
{
$('#show_next').click(loadNextPage);
}

$(document).ready(init);

</script>
Elapsed time: 0.96 ms