Search code examples
jquery-pluginstablesorter

jQuery TableSorter Plugin


Is it possible to disable the pagination (First, Previous, Next, last) links in the tablesorterpager plugin of jQuery. This is my code in jQuery

 jQuery('#mentor_engagement_report_table')
   .tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
   .tablesorterPager({container: jQuery("#pager"), positionFixed: false,size:10});

Solution

  • I've created a fork of the tablesorter plugin on github. After reading this question, I added a new option to the pager plugin named updateArrows which when true it applies a class name, contained in the new cssDisabled option to the arrows. Here is the initialization code and a demo:

    $("table")
      // initialize tablesorter
      .tablesorter()
    
      // initialize the pager plugin
      .tablesorterPager({
        // target the pager markup
        container: $("#pager"),
        // disabled class name to use
        cssDisabled : 'disabled',
        // apply disabled class name to the pager arrows when the rows at either extreme is visible
        updateArrows: true
      });
    

    And here is some example of css used in the demo:

    /*** css used when "updateArrows" option is true ***/
    /* the pager itself gets a disabled class when the number of rows is less than the size */
    #pager.disabled {
      display: none;
    }
    /* hide or fade out pager arrows when the first or last row is visible */
    #pager img.disabled {
      /* visibility: hidden */
      opacity: 0.5;
      filter: alpha(opacity=50);
    }