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

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

sparklersparkler Posts: 9Questions: 2Answers: 0

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.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • sparklersparkler Posts: 9Questions: 2Answers: 0

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

  • sparklersparkler Posts: 9Questions: 2Answers: 0

    I did try adding

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

    but it didn't do anything.
    Thanks

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • sparklersparkler Posts: 9Questions: 2Answers: 0

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

Sign In or Register to comment.