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" />