A DD4T.net Implementation - Pagination (AJAX)

This is the third and last post on the topic of implementing a pagination solution for lists of Dynamic Component Presentations retrieved by a query. If you haven't already done so, please read the first two posts to put things in context:

• Pagination - Models
• Pagination - Views

This post deals with client-side Javascript code performing the AJAX call to the server-side code and displaying the returned HTML.

In the current architecture, the server-side components render a snippet of HTML (i.e. the only piece of markup that changes between two page iterations). I use Javascript (JQuery) to replace the content of a container DIV with the HTML returned by the DD4T server-side partials. Since we receive rendered HTML back, it is quite simple to perform the DIV content replacement. No other rendering, parsing or processing is necessary as if we had received JSON back from the server.

I chose this approach because it fits better with the Tridion and DD4T architecture. I can easily reuse the Component Template and its view (and partial views) to render the same snippet of HTML for the paginated AJAX solution as well as for a normal embedded Component Presentation. I can also reuse the Controller, the models and builders. All these factors provide for a great deal of simplicity in coding and ease of maintenance of the code.

The Javascript uses JQuery just for fanciness, but it is actually not necessary to implement a simple AJAX call and a DIV content replacement. The following code example shows the initial mapping of an onclick event on an anchor tag nested inside an element with class pagination-container to a custom Javascript function pagination.

Also the code defines a generic function ajaxCall that performs a call to JQuery's $.ajax method and performs error checks and callback function execution.

$(document).ready(function () {
    myApp.init();
});

var myApp = {
    init: function () {
        $('body').on('click', '.pagination-container a', this.pagination);
    },

    ajaxCall: function (options, callback) {
        return $.ajax({
            url: options.url,
            type: options.type,
            data: options.data || {},
            success: function (data) {
                if (data.error !== undefined) {
                    console.log('error');
                } else {
                    callback(data);
                }
            },
            error: function () {
                console.log(error);
            }
        });
    },

Note that the DIV with class pagination-container is the output of the extension method Html.PagedListPager presented in the previous post. The onclick event is hooked to all anchor tags under this DIV and when clicked, the function pagination, shows here-below, is called:

    pagination: function () {
        var el = $(this),
            section = el.parents('.paged-section'),
            href = el.attr("href");

        myApp.ajaxCall({ url: href, type: 'GET' }, function (data) {
            section.html(data);
            section.find(":first-child").unwrap();
        });

        return false;
    }
}

Function pagination first calls our custom ajaxCall function and passes to it the URL of the anchor tag that was clicked. It also passes an anonymous callback function that the ajaxCall function executes in case the initial GET request to the AJAX URL is successful.

The callback function sets the inner HTML of the DIV with class pages-section (i.e. the container DIV of the paginated content returned by the AJAX Component Presentation). Finally, it needs to remove the first nested DIV under the 'section' DIV and thus executes the JQuery unwrap() function on the first child of the section node. This basically has as effect the removal of the first child DIV under the section node. This step is necessary in order to remove the duplicate DIVs introduced by simply changing the parent DIV innerHTML property.

The code above has been obviously greatly simplified in order to be easily readable and understandable as an example.