pageDisplay seems not working with $("#id") selector

[loudking]

Hi I tested with following code but the page number display area seems not working with $("#id") selector but only with pageDisplay : '.pagedisplay', // location of where the "output" is displayed.

<span class="pagedisplay"></span> this can be any element, including an input -->
      pager_selectors: {
        container   : '.pager',       // target the pager markup (wrapper)
        pageDisplay : '.pagedisplay', // location of where the "output" is displayed
      }

Please confirm this is a bug or not. Also I have many tables to be displayed on a page and all of them are using table sorter. Please suggest. Thanks.

[Mottie]

Hi @loudking!

The way the code is set up, the pageDisplay element must be inside of the container. This was done to isolate each pager block as some developers include a pager block both above and below the table. If you only have one container, then the container can be set to the "body".

Using a class name or id in the pageDisplay should not make a difference.

[loudking]

Hi I did put code inside a pager but 'pageDisplay' is still missing. Please check code below:

            <div id="unmatch_pager">
              <button type="button" class="btn btn-xs" id="unmatch_first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
              <button type="button" class="btn btn-xs" id="unmatch_prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
              <span class="pagedisplay" id="unmatch_pagedisplay"></span> <!-- this can be any element, including an input -->
              <button type="button" class="btn btn-xs" id="unmatch_next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
              <button type="button" class="btn btn-xs" id="unmatch_last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
     <!--          <span class="pagedisplay"></span> this can be any element, including an input -->
              <select id="unmatch_pagesize" title="Select page size">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="all">All Rows</option>
              </select>
              <select id="unmatch_gotoPage" title="Select page number"></select>
            </div>
      pager_selectors: {
        container   : '#unmatch_pager',       // target the pager markup (wrapper)
        first       : '#unmatch_first',       // go to first page arrow
        prev        : '#unmatch_prev',        // previous page arrow
        next        : '#unmatch_next',        // next page arrow
        last        : '#unmatch_last',        // go to last page arrow
        gotoPage    : '#unmatch_gotoPage',    // go to page selector - select dropdown that sets the current page
        pageDisplay : '.pagedisplay', // location of where the "output" is displayed
        pageSize    : '#unmatch_pagesize'     // page size selector - select dropdown that sets the "size" option
      }

I checked all fields like prev, next, etc. and confirmed all of them can be selected by $('#id') selector. but pageDisplay is an exception. It can only be selected by $('.pagedisplay'), not $('.pagedisplay #unmatch_pagedisplay') or $('#unmatch_pagedisplay') or anything else. Please confirm.

[Mottie]

I just created this demo from the HTML and code provided, and it appears to be working as expected. The pageDisplay was switched to use the ID as well.

[loudking]

Hi I updated your demo by changing table selector to $("#id") then it is not working as expected:
From
<table class="tablesorter">
to
<table class="tablesorter" id="unmatch_trades">

From
$("table").tablesorter({
To
$('#unmatch_trades').tablesorter({

Please check again.

[Mottie]

Ahh ok that isloated the issue! If the table has an id, then an "aria-describedby" attribute is added which points to the pageDisplay text, but it requires an id, so it blindly added an id to that element.

It's been fixed in both the pager addon and widget in the master branch. I plan to ship a new release soon.