jquery tablesorter changing page-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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'));
}