pager with bootstrap theme

[thezoggy]

https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme-v2.html
https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html

you do the same html for both.. and have both classes listed in each..
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>

icon-* == bootstrap 2
glyphicon == bootstrap 3

also you do things like input-mini which is bootstrap 2.. and not in 3.x
so each of these should probably be cleaned up so they reflect their versions..
in case you need it: http://getbootstrap.com/migration/
also there is bootstrap 4 soonish..

if someone wanted to do the pager how datatables does it for their bootstrap:
https://datatables.net/examples/styling/bootstrap.html

can that be done?
separating the limit from the pagination navigation..
also, notice how the filter/lack of filter changes the wording depending on if its being used or not..

[thezoggy]

noticed a few other things for the bootstrap3 being wrong.. its form-inline not horz.. and so on.. heres my html I'm using which you could probably use (adjust the colspan)..

  <tfoot>
    <tr>
      <th colspan="12" class="ts-pager form-inline">
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>
            <button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>
        </div>
        <span class="pagedisplay"></span>
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>
            <button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>
        </div>
        <select class="form-control input-sm pagesize" title="Select page size">
          <option selected="selected" value="10">10</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="all">All Rows</option>
        </select>
        <select class="form-control input-sm pagenum" title="Select page number"></select>
      </th>
    </tr>
  </tfoot>

now things are nice and aligned and the button images dont look so crappy.. similar to the image below.. just doesnt have the layout they do

[thezoggy]

or do the pagination like:

or even something simple like:
http://demos.telerik.com/kendo-ui/grid/column-menu

[Mottie]

Hi @thezoggy!

Yeah, Bootstrap is a mess... I'll look into it.

As for the alternate pager style, there is a custom pagination (beta) demo which I recently updated.

I have been thinking about making a separate pager plugin - not a widget, and separate from tablesorter - which allows you to choose the type of pager controls. It'll be one step closer to separation of the ajax and pager functions.

[Mottie]

And I think we've heard that Bootstrap 4 is coming for about a year now.

[Mottie]

Added a Bootstrap v4.x demo. I'll update it again when the beta, then stable versions are released.

And yes, I know those are fugly pager arrows... I just didn't bother to load in FontAwesome.