Klaus on Feature: set table pager width

Wed, 05 May 2010 18:17:49 +0300

I sometimes have the problem that the table pager controls overlap because the left pager cell contains many custom buttons and is displayed strange on small screen size (because each of the 3 parts gets 1/3 of the total width)

Here is the code to set the left pager part (used for custom buttons) to a bigger width if the screen is too small.

added grid option: pagerButtonCellWidth: -1 (disabled)

@ setPager:
$("#"+pgid)
    .append("<div id='"+pgcnt+"' class='ui-pager-control' role='group'><table cellspacing='0' cellpadding='0' border='0' class='ui-pg-table' style='width:100%;' role='row'><tbody><tr><td id='"+lft+"' align='left'></td><td id='"+cent+"' align='center' style='white-space:pre;'></td><td id='"+rgt+"' align='right'></td></tr></tbody></table></div>")
    .attr("dir","ltr"); //explicit setting
    if (-1 !== ts.p.pagerButtonCellWidth) {
      $('#'+lft).css({ minWidth: ts.p.pagerButtonCellWidth });
    }

@ setGridWidth:
* replace:
if($t.p.pager ) {$($t.p.pager).css("width",nwidth+"px");}

-> with:
    if($t.p.pager ) {
      $($t.p.pager).css("width",nwidth+"px");
      //this block is used to set the widths of the pager cells on resize
      if ($t.p.pagerButtonCellWidth > (nwidth/3)) { //cell too small -> make the others smaller
        $($t.p.pager+'_left')
          .css({width: $t.p.pagerButtonCellWidth})
            .next().next()
              .css({width: ''});
      }
      else if($($t.p.pager+'_center').css('display') !== 'none') {
        $($t.p.pager+'_left, '+$t.p.pager+'_center, '+$t.p.pager+'_right')
          .css("width",(nwidth/3)+"px");
      }
      else {
        $($t.p.pager+'_left, '+$t.p.pager+'_right')
          .css("width",'');
      }
    }

Maybe you could integrate this feature some time.

Kind regards,
Klaus.

jQuery Grid Plugin - jqGrid - Topic: Feature: set table pager width

Klaus on Feature: set table pager width