How to show next/previous links in Google Custom Search Engine paging links

Question

The Google Custom Search integration only includes numbered page links and I cannot find a way to include Next/Previous links like on a normal Google search. CSE used to include these links with their previous iframe integration method.

Answer 1

I stepped through the javascript and found the undocumented properties I was looking for.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">

google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('GOOGLEIDGOESHERE');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setSearchCompleteCallback(null, 
        function() { searchCompleteCallback(customSearchControl) });

    customSearchControl.draw('cse');   
}, true);


function searchCompleteCallback(customSearchControl) {

    var currentPageIndex = customSearchControl.e[0].g.cursor.currentPageIndex;

    if (currentPageIndex < customSearchControl.e[0].g.cursor.pages.length - 1) {
        $('#cse .gsc-cursor').append('<div class="gsc-cursor-page">Next</div>').click(function() {
            customSearchControl.e[0].g.gotoPage(currentPageIndex + 1);
        });
    }

    if (currentPageIndex > 0) {
        $($('#cse .gsc-cursor').prepend('<div class="gsc-cursor-page">Previous</div>').children()[0]).click(function() {
            customSearchControl.e[0].g.gotoPage(currentPageIndex - 1);
        });
    }

    window.scrollTo(0, 0);

}
</script>

<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

Answer 2

I've been using this to find the current page:

ctrl.setSearchCompleteCallback(null, function(gControl, gResults)
{
    currentpage = 1+gResults.cursor.currentPageIndex;
    // or, here is an alternate way
    currentpage = $('.gsc-cursor-current-page').text();
});

Answer 3

And now it's customSearchControl.k[0].g.cursor ... (as of this weekend, it seems)

Next time it stops working just go to script debugging in IE, add customSearchControl as a watch, open the properties (+), under the Type column look for Object, (Array) and make sure there is a (+) there as well (i.e. contains elements), open[0], and look for Type Object, again with child elements. Open that and once you see "cursor" in the list, you've got it.