nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.39k stars 385 forks source link

tui-page-btn error (tui-pagination, tui-grid) #2017

Closed SEONG-GI-IN closed 5 months ago

SEONG-GI-IN commented 5 months ago

I developed tui grid and paging, but when I press the page button other than page 1, it moves to the last page button. Data is searched according to the perPage and page parameters, but the page button is continuously selected as the last page button.

As a result of debugging, it seems that the tui-page-btn area is created correctly the first time, but as the tui-page-btn area is created again, targetPage is becoming the last page. I want to know the solution

image

const params = { itemNm: $("input#itemNm").val(), itemTypeCd: $("#itemTypeCd").val(), supplierCd: $("#supplierCd").val() }

const dataSource = { api: { readData: { url: '/item/getItemList', method: 'get', params: params, pageOptions: { perPage: 10 } }, initialRequest: false, // 디폴트 값은 true contentType: 'application/json', headers: { 'x-custom-header': 'custom-header' }, } }

const grid = new tui.Grid({ el: document.getElementById('grid'), scrollX: false, scrollY: false, rowHeaders: ['checkbox'], pageOptions: { perPage: 10 }, data: dataSource, columns: [ { header: '거래처', name: 'SUPPLIER', align: 'center' }, { header: '품목명', name: 'ITEM_NM', align: 'center' }, { header: '상품분류', name: 'ITEM_TYPE_NM', align: 'center' }, { header: '매입가', align: 'center', formatter: function (data) { return data.row.PURCHASE_PRICE + "원"; } }, ] });