英文:
Disable pagination First and Last buttons
问题
使用tabulator和分页功能时，我想禁用"第一页"和"最后一页"按钮。
我尝试使用paginationButtonCount属性，将其设置为3，而不是默认的5，但这没有改变任何东西。
是否有一种方法可以实现这一点？
此外，是否有一种方法可以自己设置分页按钮的启用/禁用？
英文:
When using tabulator and the pagination feature, I want to disable First and Last buttons.
I tried using the paginationButtonCount property, and set it to 3 instead of the default 5, but that didn't change anything.
Is there a way to accomplish that?
Also, is there a way to set the enablement/disablement of the pagination buttons on my own?
答案1
得分: 0
为了解决这个问题，我检查了默认分页HTML的外观。然后，我使用Tabulator的footerElement配置来准备自己的页脚元素：
footerElement: preparePaginatorElement()
结果的方法如下：
function preparePaginatorElement() {
previousButton = document.createElement("button");
previousButton.classList.add("tabulator-page");
previousButton.type = "button";
previousButton.role = "button";
previousButton.ariaLabel = "Prev Page";
previousButton.title = "Prev Page";
previousButton.setAttribute("data-page", "prev");
previousButton.disabled = true;
previousButton.innerText = "Prev Page";
previousButton.addEventListener("click", () => changePage(currentPage - 1, true));
nextButton = document.createElement("button");
nextButton.classList.add("tabulator-page");
nextButton.type = "button";
nextButton.role = "button";
nextButton.ariaLabel = "Next Page";
nextButton.title = "Next Page";
nextButton.setAttribute("data-page", "next");
nextButton.disabled = true;
nextButton.innerText = "Next Page";
nextButton.addEventListener("click", () => changePage(currentPage + 1, true));
pageButton = document.createElement("button");
pageButton.classList.add("tabulator-page");
pageButton.type = "button";
pageButton.role = "button";
pageButton.innerText = "1";
pageButton.style.cursor = "default";
const pagesSpan = document.createElement("span");
pagesSpan.classList.add("tabulator-pages");
pagesSpan.appendChild(pageButton);
const paginatorSpan = document.createElement("span");
paginatorSpan.classList.add("tabulator-paginator");
paginatorSpan.appendChild(previousButton);
paginatorSpan.appendChild(pagesSpan);
paginatorSpan.appendChild(nextButton);
const footerContentsDiv = document.createElement("div");
footerContentsDiv.classList.add("tabulator-footer-contents");
footerContentsDiv.appendChild(paginatorSpan);
const footerDiv = document.createElement("div");
footerDiv.classList.add("tabulator-footer");
footerDiv.appendChild(footerContentsDiv);
return footerDiv;
}
英文:
For solving this, I inspected how the default pagination html looked like.
Then, I used tabulator's footerElement configuration in order to prepare my own footer element:
footerElement: preparePaginatorElement()
The resulting method looks like this:
function preparePaginatorElement() {
previousButton = document.createElement("button");
previousButton.classList.add("tabulator-page");
previousButton.type = "button";
previousButton.role = "button";
previousButton.ariaLabel = "Prev Page";
previousButton.title = "Prev Page";
previousButton.setAttribute("data-page", "prev");
previousButton.disabled = true;
previousButton.innerText = "Prev Page";
previousButton.addEventListener("click", () => changePage(currentPage - 1, true));
nextButton = document.createElement("button");
nextButton.classList.add("tabulator-page");
nextButton.type = "button";
nextButton.role = "button";
nextButton.ariaLabel = "Next Page";
nextButton.title = "Next Page";
nextButton.setAttribute("data-page", "next");
nextButton.disabled = true;
nextButton.innerText = "Next Page";
nextButton.addEventListener("click", () => changePage(currentPage + 1, true));
pageButton = document.createElement("button");
pageButton.classList.add("tabulator-page"/*, "active"*/);
pageButton.type = "button";
pageButton.role = "button";
pageButton.innerText = "1";
pageButton.style.cursor = "default";
const pagesSpan = document.createElement("span");
pagesSpan.classList.add("tabulator-pages");
pagesSpan.appendChild(pageButton);
const paginatorSpan = document.createElement("span");
paginatorSpan.classList.add("tabulator-paginator");
paginatorSpan.appendChild(previousButton);
paginatorSpan.appendChild(pagesSpan);
paginatorSpan.appendChild(nextButton);
const footerContentsDiv = document.createElement("div");
footerContentsDiv.classList.add("tabulator-footer-contents");
footerContentsDiv.appendChild(paginatorSpan);
const footerDiv = document.createElement("div");
footerDiv.classList.add("tabulator-footer");
footerDiv.appendChild(footerContentsDiv);
return footerDiv;
}
答案2
得分: 0
在使用远程分页的情况下，你可以在你的ajaxResponse函数中隐藏按钮。
ajaxResponse:function(url, params, response){
document.querySelector('[title="Last Page"]').hidden = true;
return response.data;
}
英文:
Assuming you're using remote pagination, you can hide the button in your ajaxResponse function.
ajaxResponse:function(url, params, response){
document.querySelector('[title="Last Page"]').hidden = true;
return response.data;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论