While at work, I was trying to find a way to easily do server side pagination without writing all the lovely logic myself. Due to some constraints, I am unable to use more high end framework such as JSF and struts. Which in a way I believe is a good thing. I would have more control over just writing servlets. However, having written pagination logic before, I really did not want to write that again. Somehow I thought of jQuery. Just for amusement, I looked for jQuery pagination plugin and guess what I found it! By using this plugin, I can pass in some simple parameters such as total records, records per page, number of pages shown etc. to have jQuery generate a paginator for me. That’s beyond cool so I put it into action.

Upload Report Mock uses the jQuery pagination plugin but handles the pagination on the server side via php.

Ultimately what I also want to handle is the following scenario:

• I have a table of data, one of the column is editable.
• If the user clicks on the column of a particular table row, a modal window will pop up asking for additional information.
• The user fills out the information and submits.
• The window updates the info for that table via AJAX and updates the results screen

While I was eager for figure out how to accomplish that in jQuery, I found out that it is not one of the previously used javascript framework at work so they asked if I could look into YUI.

Digging into YUI, first I tried to accomplish the same thing using the YUI paginator widget. I spent two hours but it really does not seem like I can generate some href tags with this component like I could with the jQuery plugin. With jQuery, I could produce:

<div id="pagination">
<a class="prev" href="/work/eAdjusterActivityReport/uploadReport.php?page=1">Prev</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=1">1</a>
<span class="current">2</span>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=3">3</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=4">4</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=5">5</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=6">6</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=7">7</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=8">8</a>
<span>...</span>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=10">10</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=11">11</a>
<a class="next" href="/work/eAdjusterActivityReport/uploadReport.php?page=3">Next</a>
</div>

With YUI, I have to hook up the paginator with another javascript or YUI widget. So to make things easier, I looked into YUI’s datatable component and found an example to use it with server side pagination and sorting. That seems to accomplish the overall need of pagination. Although that’s a bit of overkill but I thought it’s worth a shot. I spent 8 hours implementing it via server side JSON. Here’s what I produced:
Upload Report Mock with YUI

Instead of 10 lines of javascript code like the previous, this one has 68 lines. But it does provide AJAX pagination so I thought that’s mostly fair.

Next I looked for a simple date picker calendar in YUI like the jQuery date picker plugin. The date picker is a necessary functionality of the application. With jQuery, it’s extremely easy to use. You add the plugin js & css links, and then you give your input css class or unique IDs and with jQuery selector, just call the plugin via:

$("#startDate").datepicker()

Click on the start and end dates in Upload Report Mock to see it in action.

Using YUI, I looked into its calendar component. The closest thing I could find is this example.

Not only would it need all these extra js includes

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

It also requires another 76 lines of javascript code for just adding one date picker.

Despite the complication, I tried to make it work with my Upload Report Mock with YUI but I failed pretty miserably. Sure if I put in enough hours, I will eventually make it work but WHY? Why would you stop yourself from using something else that takes 2 seconds?

At this point, I presented my findings to my co-workers. I really hope they will accept jQuery. Yea sure it’s yet another new javascript framework but it will save coding time.

Here’s another comparison. I found a very YUI datatable like jQuery plugin flexigrid. Take a look at example 3. Lines of code to use server side pagination and sorting: 33. In my Upload Report Mock with YUI, I used 68 lines. Also let’s do a comparison to see which one makes more sense and is less verbose.

jQuery:

$("#flex1").flexigrid({
	url: 'post2.php',
	dataType: 'json',
	colModel : [
		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: 'Countries',
	useRp: true,
	rp: 15,
	showTableToggleBtn: true,
	width: 700,
	height: 200
	}
);  

YUI: click for source.