Page Navigation Event

  • declare html tag for grid
// Samples
let columns = [
      { name : "custcd"     , header: { text:"Code"                }, width : 80  }
    , { name : "usernm"     , header: { text:"Manager"             }, width : 100 }
    , { name : "custnm"     , header: { text:"Customer"            }, width : 100 }
    , { name : "bizno"      , header: { text:"Biz Number"          }, width : 100 }
    , { name : "ceo"        , header: { text:"ceo"                 }, width : 100 }
    , { name : "tel"        , header: { text:"Telephone"           }, width : 100 }
    , { name : "email"      , header: { text:"E-Mail"              }, width : 100 }
    , { name : "saddr"      , header: { text:"Area"                }, width : 100 }
    , { name : "addr"       , header: { text:"Address"             }, width : 100 }
    , { name : "creditamt"  , header: { text:"Credit limit"        }, type : 'number', scale : '18,2' }
    , { name : "payamt_d"   , header: { text:"Other Payable"       }, type : 'number', scale : '18,2' }
    , { name : "getamt_d"   , header: { text:"Accounts receivable" }, type : 'number', scale : '18,2' }
    , { name : "useyn"      , header: { text:"Use"                 }, width : 60  }
    , { name : "custnote"   , header: { text:"note"                }, width : 100 }
];

grid1 = new TbsGrid('grid1');

const options = {};
grid1.setGrid(columns, options);

grid1.options.pageRowCount = 5;
grid1.options.pageRowCountList = [5, 15];

grid1.setGridMode('pagination'); // grid1.setGridMode('paging');

grid1.setTotalRowCount(100);
grid1.setData(grid_data1);

// user event
grid1.onClickPage = function(grid, pageIndex, selectedRowCount, pageClickOrder) {
    grid1.setTotalRowCount(100);
    grid1.setData(grid_data2);
}
grid1.onChangePageRowCount = function(grid, pageIndex, selectedRowCount) {
    grid1.setData(grid_data2);
}