Pagination
Javascript Data Grid
To Paginate your Data Set in-memory
Add this code before you initialize the data grid.
deebo.methods.setPagination(true)Update the rows per page in the same manner (before table initialization) using the code below. Pass any whole number that makes sense for pagination aka likely 250 at the most.
deebo.methods.setRowsPerPage(100)Using in-memory setting alone, and not server-side pagination will preserve all the full features except the group by feature. You can sample the in-memory paginated table.
Server-side Pagination
To implement server-side pagination, add the same code above to with the additional lines of code and the handler implementation described below.
Keep in mind, server-side pagination disables charts, group by, exports, and drop-down filters.
Pass your server-side sum (number) to the setServerSideTotal. This will make the table give you an outlet to control each page change on your own. In your own window level script, you need to provide an implementation for the pageChange function like below:
pageChange accepts one parameter, a configuration object with some helpers for implementing server-side implementation. The object has the below properties
Keep the serverSideTotal > 0 so server-side pagination continues to work. Pass 0 to this function when you undo all filters and want to stop using the serverSideFilteredTotal.
deebo.methods.setServerSideTotal(50000)Pass your server-side sum (number) to the setServerSideTotal. This will make the table give you an outlet to control each page change on your own. In your own window level script, you need to provide an implementation for the pageChange function like below:
pageChange accepts one parameter, a configuration object with some helpers for implementing server-side implementation. The object has the below properties
- skip a number equal to the page number - 1. Use this as an offset
- take a number equal to the rows per page
- topLevelFilter the value of the omnifilter above the table
- columnConfig contains column filter values
- sortOrder a string[] containing the current sort priority
function pageChange(event) {
//event provides data you can use to get more data from your apis
/*{skip: (dataTableService.methods.currPage-1),
take: dataTableService.methods.rowsPerPage,
topLevelFilter: document.getElementById("topLevelDataFilter").value,
columnConfig: dataTableService.methods.getFilTrkerData(), sortOrder: current sort order}*/
//use setPageLoadMessage below to set a page load message, then setLoading to show it
deebo.methods.setPageLoadMessage("Loading page " + (event.skip+1) + "...")
deebo.methods.setLoading(deebo.methods.pageLoadMessage)
//call your api here using the info in the event argument, then pass the resulting response array to initializeLocalData
deebo.methods.initializeLocalData(newPageArrayDataFromApi)
}
Filter with Server-side Pagination
Implement another top level script function in your own code called dataFiltered
function dataFiltered(event) {
//event provides data anytime a filter gets applied when using server-side pagination
/*{ topLevelFilter: document.getElementById("topLevelDataFilter").value,
columnConfig: filTrkr,
sortOrder: current sort order }*/
//You can use this data to query your back end and pass an overriding, filtered total to setServerSideFilteredTotal
}
deebo.methods.setServerSideFilteredTotal(10000)Keep the serverSideTotal > 0 so server-side pagination continues to work. Pass 0 to this function when you undo all filters and want to stop using the serverSideFilteredTotal.
