third-party/slickgrid-2.1/controls/slick.pager.js

   1 (function ($) {
   2   function SlickGridPager(dataView, grid, $container) {
   3     var $status;
   4
   5     function init() {
   6       dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
   7         updatePager(pagingInfo);
   8       });
   9
  10       constructPagerUI();
  11       updatePager(dataView.getPagingInfo());
  12     }
  13
  14     function getNavState() {
  15       var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
  16       var pagingInfo = dataView.getPagingInfo();
  17       var lastPage = pagingInfo.totalPages - 1;
  18
  19       return {
  20         canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
  21         canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
  22         canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
  23         canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
  24         pagingInfo: pagingInfo
  25       }
  26     }
  27
  28     function setPageSize(n) {
  29       dataView.setRefreshHints({
  30         isFilterUnchanged: true
  31       });
  32       dataView.setPagingOptions({pageSize: n});
  33     }
  34
  35     function gotoFirst() {
  36       if (getNavState().canGotoFirst) {
  37         dataView.setPagingOptions({pageNum: 0});
  38       }
  39     }
  40
  41     function gotoLast() {
  42       var state = getNavState();
  43       if (state.canGotoLast) {
  44         dataView.setPagingOptions({pageNum: state.pagingInfo.totalPages - 1});
  45       }
  46     }
  47
  48     function gotoPrev() {
  49       var state = getNavState();
  50       if (state.canGotoPrev) {
  51         dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum - 1});
  52       }
  53     }
  54
  55     function gotoNext() {
  56       var state = getNavState();
  57       if (state.canGotoNext) {
  58         dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum + 1});
  59       }
  60     }
  61
  62     function constructPagerUI() {
  63       $container.empty();
  64
  65       var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
  66       var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
  67       $status = $("<span class='slick-pager-status' />").appendTo($container);
  68
  69       $settings
  70           .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
  71
  72       $settings.find("a[data]").click(function (e) {
  73         var pagesize = $(e.target).attr("data");
  74         if (pagesize != undefined) {
  75           if (pagesize == -1) {
  76             var vp = grid.getViewport();
  77             setPageSize(vp.bottom - vp.top);
  78           } else {
  79             setPageSize(parseInt(pagesize));
  80           }
  81         }
  82       });
  83
  84       var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
  85       var icon_suffix = "' /></span>";
  86
  87       $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
  88           .click(function () {
  89             $(".slick-pager-settings-expanded").toggle()
  90           })
  91           .appendTo($settings);
  92
  93       $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
  94           .click(gotoFirst)
  95           .appendTo($nav);
  96
  97       $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
  98           .click(gotoPrev)
  99           .appendTo($nav);
 100
 101       $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
 102           .click(gotoNext)
 103           .appendTo($nav);
 104
 105       $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
 106           .click(gotoLast)
 107           .appendTo($nav);
 108
 109       $container.find(".ui-icon-container")
 110           .hover(function () {
 111             $(this).toggleClass("ui-state-hover");
 112           });
 113
 114       $container.children().wrapAll("<div class='slick-pager' />");
 115     }
 116
 117
 118     function updatePager(pagingInfo) {
 119       var state = getNavState();
 120
 121       $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
 122       if (!state.canGotoFirst) {
 123         $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
 124       }
 125       if (!state.canGotoLast) {
 126         $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
 127       }
 128       if (!state.canGotoNext) {
 129         $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
 130       }
 131       if (!state.canGotoPrev) {
 132         $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
 133       }
 134
 135       if (pagingInfo.pageSize == 0) {
 136         $status.text("Showing all " + pagingInfo.totalRows + " rows");
 137       } else {
 138         $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);
 139       }
 140     }
 141
 142     init();
 143   }
 144
 145   // Slick.Controls.Pager
 146   $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
 147 })(jQuery);