https://portal.uicalaska.com/Scripts/SlickGrid/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        var totalRowsCount = dataView.getItems().length;
137        var visibleRowsCount = pagingInfo.totalRows;
138        if (visibleRowsCount < totalRowsCount) {
139          $status.text("Showing " + visibleRowsCount + " of " + totalRowsCount + " rows");
140        } else {
141          $status.text("Showing all " + totalRowsCount + " rows");
142        }
143        $status.text("Showing all " + pagingInfo.totalRows + " rows");
144      } else {
145        $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);
146      }
147    }
148
149    init();
150  }
151
152  // Slick.Controls.Pager
153  $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
154})(jQuery);