The ajaxPager is a JQuery + Bootstrap plugin that creates a pagination control bar, according to configuration, that will make remote requests for data. The control then passes the response to a developer defined method to create the output. In the example, we used the Handlebars templating engine to create display items of each record in a returned JSON recordset.
ajaxPager is available on GitHub.
The ajaxPager component requires JQuery and Bootstrap be loaded in your template, as well as the stylesheet and script used for the ajaxPager.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<head>Our Test Case</head>
<link href="/resources/scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/resources/styles/custom/subnav.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2"> </div>
<div class="span8">
<!-- Our Paged Container -->
<div id="testCont"> This is where the paging content loads...</div>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script src="/resources/scripts/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/resources/scripts/bootstrap.ajaxpager-0.8.js"></script>
<!-- Our custom script for our demo -->
<script type="text/javascript" src="/resources/scripts/custom/pagingTest.js"></script>
<!-- Use whatever templating method you want -->
<!-- We'll use Handlebars JS for a templating engine in our example -->
<script src="/resources/scripts/handlebars-1.0.0.0.beta.6.js"></script>
<script id="line-template" type="text/x-handlebars-template">
<!-- Handlebars JS Template -->
</script>
</body>
</html>
In our example we're using HandlebarsJS as our templating engine, but you can use whatever engine you like for rendering your output. The ajaxPager will:
It does most of this behind the scenes. All that's required is instantiating the ajaxPager with a valid configuration.
$(document).ready(function(){
// Other stuff
$('div#testCont').ajaxPager({
position: 'both',
class: 'someclass',
stripedrows: true,
loadtext: 'Retrieving your data...',
...
});
});
$(document).ready(function(){
//Other stuff
$('div#testCont').ajaxPager({
...
page: 1,
limit: 10,
limitdd: true,
limitoptions: [10,20,30,40,50],
sortcolumn: 'title',
sortdir: 'asc',
sortby: {
title: 'Title',
posted: 'Date Posted',
views: 'Views'
},
searchtext: '{"title":"ColdFusion"}',
...
});
});
$(document).ready(function(){
// Reference and Compile the Handlebars template
var tplContent = $('#line-template').html();
var lineTpl = Handlebars.compile(tplContent);
$('div#testCont').ajaxPager({
...
ajaxoptions: {
url: 'com/cc/Blog/Entries.cfc',
data: {
method: 'getEntries',
returnFormat: 'json'
},
dataType: 'json'
},
params: {
page: 'pageIndex',
limit: 'pageSize',
sort: 'sortCol',
dir: 'sortDir'
},
reader: {
success: 'success',
message: 'message',
totalpages: 'pageCount',
totalrecords: 'recordCount',
root: 'data'
},
renderoutput: lineTpl, // Apply the Handlebars template to the output
...
});
});
$(document).ready(function(){
...
var testHandler = function (){
console.log(arguments);
}
$('div#testCont').ajaxPager({
...
listeners: {
init: testHandler,
render: testHandler,
preprocess: $.serializeCFJSON, // Convert native CF query json to standard name/value json
beforeload : testHandler,
load : testHandler,
destroy : testHandler
}
});
});
The only thing you really require now is a template for your templating engine. Some kind of definition for how you want each item of the dataset to be rendered. For the above example we used something very basic, using the Handlebars JS engine.
<script id="line-template" type="text/x-handlebars-template">
{{#each data}}
<div class="row-fluid data-row" id="{{this.id}}">
<div class="span2">
{{this.posted}}
</div>
<div class="span9">
{{this.title}}
</div>
<div class="span1">
{{this.views}}
</div>
</div>
{{/each}}
</script>
That's it! Nothing to it! The pager will keep track of what page you're on, change your record counts, make and process your ajax requests, all behind the scenes.