在 Tabulator JS 中禁用分页工具提示按钮（第一个、最后一个、页码（1、2、3））

Question

I need only the previous and next buttons on my table for pagination.我只需要表格上的上一个和下一个按钮进行分页。 I don't need (first, last, page numbers(1, 2, 3)) buttons.我不需要 (first, last, page numbers(1, 2, 3)) 按钮。 Is there any way to disable these pagination buttons similar to enabling/disabling paginationCounter?有什么方法可以禁用这些分页按钮，类似于启用/禁用 paginationCounter？ I'm using tabulator.js for my table implementation.我将 tabulator.js 用于我的表实现。

Reference:参考：

 //define data array var tabledata = [ { id: 1, name: 'Oli Bob', progress: 12, gender: 'male', rating: 1, col: 'red', dob: '19/02/1984', car: 1, }, { id: 2, name: 'Mary May', progress: 1, gender: 'female', rating: 2, col: 'blue', dob: '14/05/1982', car: true, }, { id: 3, name: 'Christine Lobowski', progress: 42, gender: 'female', rating: 0, col: 'green', dob: '22/05/1982', car: 'true', }, { id: 4, name: 'Brendon Philips', progress: 100, gender: 'male', rating: 1, col: 'orange', dob: '01/08/1980', }, { id: 5, name: 'Margret Marmajuke', progress: 16, gender: 'female', rating: 5, col: 'yellow', dob: '31/01/1999', }, { id: 6, name: 'Frank Harbours', progress: 38, gender: 'male', rating: 4, col: 'red', dob: '12/05/1966', car: 1, }, ]; var table = new Tabulator('#example-table', { data: tabledata, //load row data from array layout: 'fitColumns', //fit columns to width of table responsiveLayout: 'hide', //hide columns that dont fit on the table tooltips: true, //show tool tips on cells addRowPos: 'top', //when adding a new row, add it to the top of the table history: true, //allow undo and redo actions on the table pagination: 'local', //paginate the data paginationSize: 2, //allow 7 rows per page of data paginationCounter: 'rows', //display count of paginated rows in footer movableColumns: true, //allow column order to be changed initialSort: [ //set the initial sort order of the data { column: 'name', dir: 'asc' }, ], columns: [ //define the table columns { title: 'Name', field: 'name', editor: 'input' }, { title: 'Task Progress', field: 'progress', hozAlign: 'left', formatter: 'progress', editor: true, }, { title: 'Gender', field: 'gender', width: 95, editor: 'select', editorParams: { values: ['male', 'female'] }, }, { title: 'Rating', field: 'rating', formatter: 'star', hozAlign: 'center', width: 100, editor: true, }, { title: 'Color', field: 'col', width: 130, editor: 'input' }, { title: 'Date Of Birth', field: 'dob', width: 130, sorter: 'date', hozAlign: 'center', }, { title: 'Driver', field: 'car', width: 90, hozAlign: 'center', formatter: 'tickCross', sorter: 'boolean', editor: true, }, ], });

 <html> <link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet" /> <body> <div id="example-table"></div> </body> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js" ></script> <script type="module" src="./index.js"></script> </html>

Answer 1

To disable paginationButtonCount, simply set it to 0.要禁用 paginationButtonCount，只需将其设置为 0。
To disable the First and Last buttons take the CSS approach and set display as none for these two buttons.要禁用第一个和最后一个按钮，请采用 CSS 方法并将这两个按钮的显示设置为无。

 //define data array var tabledata = [ { id: 1, name: 'Oli Bob', progress: 12, gender: 'male', rating: 1, col: 'red', dob: '19/02/1984', car: 1, }, { id: 2, name: 'Mary May', progress: 1, gender: 'female', rating: 2, col: 'blue', dob: '14/05/1982', car: true, }, { id: 3, name: 'Christine Lobowski', progress: 42, gender: 'female', rating: 0, col: 'green', dob: '22/05/1982', car: 'true', }, { id: 4, name: 'Brendon Philips', progress: 100, gender: 'male', rating: 1, col: 'orange', dob: '01/08/1980', }, { id: 5, name: 'Margret Marmajuke', progress: 16, gender: 'female', rating: 5, col: 'yellow', dob: '31/01/1999', }, { id: 6, name: 'Frank Harbours', progress: 38, gender: 'male', rating: 4, col: 'red', dob: '12/05/1966', car: 1, }, ]; var table = new Tabulator('#example-table', { data: tabledata, //load row data from array layout: 'fitColumns', //fit columns to width of table responsiveLayout: 'hide', //hide columns that dont fit on the table addRowPos: 'top', //when adding a new row, add it to the top of the table history: true, //allow undo and redo actions on the table pagination: 'local', //paginate the data paginationSize: 2, //allow 7 rows per page of data paginationButtonCount: 0, paginationCounter: 'rows', //display count of paginated rows in footer movableColumns: true, //allow column order to be changed initialSort: [ //set the initial sort order of the data { column: 'name', dir: 'asc' }, ], columns: [ //define the table columns { title: 'Name', field: 'name', editor: 'input' }, { title: 'Task Progress', field: 'progress', hozAlign: 'left', formatter: 'progress', editor: true, }, { title: 'Gender', field: 'gender', width: 95, editor: 'select', editorParams: { values: ['male', 'female'] }, }, { title: 'Rating', field: 'rating', formatter: 'star', hozAlign: 'center', width: 100, editor: true, }, { title: 'Color', field: 'col', width: 130, editor: 'input' }, { title: 'Date Of Birth', field: 'dob', width: 130, sorter: 'date', hozAlign: 'center', }, { title: 'Driver', field: 'car', width: 90, hozAlign: 'center', formatter: 'tickCross', sorter: 'boolean', editor: true, }, ], });

 .tabulator-page[data-page='first'], .tabulator-page[data-page='last'] { display: none !important; }

 <html> <link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet" /> <body> <div id="example-table"></div> </body> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js" ></script> <script type="module" src="./index.js"></script> </html>

在 Tabulator JS 中禁用分页工具提示按钮（第一个、最后一个、页码（1、2、3））

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-07-14 21:28:33

在 Tabulator JS 中禁用分页工具提示按钮（第一个、最后一个、页码（1、2、3））

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-07-14 21:28:33

解决方案1
1 已采纳 2022-07-14 21:28:33