0

Following the tutorial on this link https://mottie.github.io/tablesorter/beta-testing/example-pager-custom-controls.html#

How is the example able to change page (clicking on the page number) when the link tag itself is empty?

 link           : '<a href="#">{page}</a>', 

I have my previous and next buttons working, but as expected the page number doesn't work. I'm wondering how in the example, the page number is able to work?

2 Answers 2

0

From your explanation it seems you are missing data-page attribute is missing for your link. Check if this is going to help you :

<a href="#" data-page="10">10</a>

Within data-page you will need to pass the dynamic number of page

0

The issue was the function below (in JQuery, pager-custom-controls.js) that is supposed to trigger for onclick event, doesn't get triggered for whatever reason I still don't know.

// pager-control setup
        $pager.on('click', options.currentPage, function() {
            focusOnPager = true;
            var $el = $(this);
            $el
                .addClass(options.currentClass)
                .siblings()
                .removeClass(options.currentClass);
            $table.trigger('pageSet', $el.attr('data-page'));
            return false;
        });

For a workaround, I added a custom onclick function in the (a) tag, and added the code above to my custom onclick function.

Example:

 link           : '<a href="#" onclick="({page});">{page}</a>', 
function onclick(page) {
  var $el = $('#tableID').find('a[data-page]="' + page + '"');
  $el
    .addClass('current')
    .siblings()
    .removeClass('current');
  $('#tableID').trigger('pageSet', $el.attr('data-page'));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.