Using Scroll to top with pagination but want pagination at top and bottom please

sparkler

Hi I am using this code for the scroll to top and works fine but would like to have the pagination at top of table as well as the bottom for convenience for the user.

$(document).ready(function() {
    var oldStart = 0;
    $('#jobs').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "simple_numbers",
        "fnDrawCallback": function (o) {
            if ( o._iDisplayStart != oldStart ) {
                var targetOffset = $('#jobs').offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 500);
                oldStart = o._iDisplayStart;
            }
        }
        
    });

} );

Also is there a way to make it offset a bit further up as it cuts the top of the table off by a tiny bit.
Thanks.

colin

You can use the dom to determine where the pagination controls go. It's possible to have them both above and below the table - see here,

Colin

sparkler

Hi I get a 404 for the link you sent.
Thanks

sparkler

I did try adding

 "dom": '<"wrapper"flipt>'

but it didn't do anything.
Thanks

kthorngren

The example link Colin provided works. You might have a browser issue with accessing it. His example uses dom: 'plfrtip' to place paging, using p, element at the top and bottom.

Kevin

sparkler

Hi I am still having trouble with this site:
https://australianfoundryinstitute.com.au/employment-opportunities/

It won't work unless I use this for pagination:

jQuery(document).ready( function () {
    jQuery('#jobs').DataTable();
 
} );

It won't let me add the document ready as I gave previously. How can I add the scroll to top of the table using this please.

allan

Where you have this:

    jQuery('#jobs').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "simple_numbers",
        "fnDrawCallback": function (o) {
            if ( o._iDisplayStart != oldStart ) {
                var targetOffset =  jQuery('#jobs').offset().top;
                 jQuery('html,body').animate({scrollTop: targetOffset}, 500);
                oldStart = o._iDisplayStart;
            }
        }
         
    });

Add:

dom: 'ptp'

or something like that depending on what features you want to display and where.

Allan