https://websoftware.com.br/PaginacaoWsGrid.js?fix=3&v=166.260916.2-hf-167.260921.1

1(function configuraListaPaginacaoRodape() {
2    var menuAberto = null;
3    var quantidadeAlturaOpcao = 28;
4
5    function ehPaginacaoRodape(elemento) {
6        return elemento && elemento.tagName === "SELECT" && /___wsddl2$/.test(elemento.id);
7    }
8
9    function criaEstilo() {
10        if (document.getElementById("wsgrid-paginacao-menu-style")) {
11            return;
12        }
13
14        var style = document.createElement("style");
15        style.id = "wsgrid-paginacao-menu-style";
16        style.textContent = "select[id$=\"___wsddl2\"] { color: var(--cinza-900, #333) !important; font-size: 13px !important; min-width: 70px !important; text-align: center !important; white-space: nowrap; width: 70px !important; } .wsgrid-paginacao-menu { background: var(--cinza-100, #fff); border: var(--border-width, 1px) solid var(--cinza-300, #ccc); border-radius: var(--radius-sm, 4px); box-shadow: var(--boxshadow-regular, 4px 4px 20px rgba(0, 0, 0, .15)); box-sizing: border-box; overflow-y: auto; padding: 4px; } .wsgrid-paginacao-menu button { background: transparent; border: 0; border-radius: var(--radius-sm, 4px); box-sizing: border-box; color: var(--cinza-900, #333); cursor: pointer; display: block; font: inherit; min-height: 28px; padding: 4px 8px; text-align: left; width: 100%; } .wsgrid-paginacao-menu button:hover, .wsgrid-paginacao-menu button:focus { background: var(--secundaria-light-4, #f6fcfd); color: var(--primaria-dark, #002b4d); outline: 0; } .wsgrid-paginacao-menu button[aria-selected=\"true\"] { background: var(--secundaria-light-2, #d8f8fa); color: var(--primaria-dark, #002b4d); font-weight: 600; }";
17        document.head.appendChild(style);
18    }
19
20    criaEstilo();
21
22    function fechaMenu() {
23        if (!menuAberto) {
24            return;
25        }
26
27        var select = menuAberto.select;
28        menuAberto.element.remove();
29        menuAberto = null;
30        select.removeAttribute("aria-expanded");
31        select.removeAttribute("aria-controls");
32    }
33
34    function selecionaPagina(select, indice) {
35        select.selectedIndex = indice;
36        fechaMenu();
37
38        var evento = document.createEvent("HTMLEvents");
39        evento.initEvent("change", true, false);
40        select.dispatchEvent(evento);
41    }
42
43    function abreMenu(select) {
44        if (!select.options || select.options.length <= 1) {
45            return;
46        }
47
48        criaEstilo();
49        fechaMenu();
50
51        var retangulo = select.getBoundingClientRect();
52        var largura = Math.max(retangulo.width, 160);
53        var altura = Math.min(select.options.length * quantidadeAlturaOpcao + 8, window.innerHeight - 16);
54        var espacoAbaixo = window.innerHeight - retangulo.bottom - 8;
55        var top = espacoAbaixo >= altura ? retangulo.bottom + 4 : Math.max(8, retangulo.top - altura - 4);
56        var left = Math.min(Math.max(8, retangulo.left), window.innerWidth - largura - 8);
57        var menu = document.createElement("div");
58
59        menu.className = "wsgrid-paginacao-menu";
60        menu.id = "wsgrid-paginacao-menu";
61        menu.setAttribute("role", "listbox");
62        menu.style.position = "fixed";
63        menu.style.left = left + "px";
64        menu.style.top = top + "px";
65        menu.style.width = largura + "px";
66        menu.style.maxHeight = altura + "px";
67        menu.style.zIndex = "100000";
68
69        for (var i = 0; i < select.options.length; i++) {
70            (function (indice) {
71                var opcao = select.options[indice];
72                var item = document.createElement("button");
73
74                item.type = "button";
75                item.textContent = opcao.text;
76                item.setAttribute("role", "option");
77                item.setAttribute("aria-selected", indice === select.selectedIndex ? "true" : "false");
78                item.addEventListener("click", function () {
79                    selecionaPagina(select, indice);
80                });
81                menu.appendChild(item);
82            })(i);
83        }
84
85        document.body.appendChild(menu);
86        menuAberto = { element: menu, select: select };
87        select.setAttribute("aria-expanded", "true");
88        select.setAttribute("aria-controls", menu.id);
89    }
90
91    function trataAbertura(event) {
92        if (!ehPaginacaoRodape(event.target)) {
93            return;
94        }
95
96        event.preventDefault();
97        event.stopPropagation();
98        abreMenu(event.target);
99    }
100
101    document.addEventListener("mousedown", trataAbertura, true);
102    document.addEventListener("click", trataAbertura, true);
103    document.addEventListener("focusin", function (event) {
104        if (ehPaginacaoRodape(event.target)) {
105            abreMenu(event.target);
106        }
107    });

108    document.addEventListener("keydown", function (event) {
109        if (event.key === "Escape") {
110            fechaMenu();
111        }
112    });
113    document.addEventListener("mousedown", function (event) {
114        if (menuAberto && event.target !== menuAberto.select && !menuAberto.element.contains(event.target)) {
115            fechaMenu();
116        }
117    });
118})();