Realize that the paging component is suspended at the bottom of the page
pagination paging control in the project page using eletable + ele.
wants to implement a paging control that does not scroll with the page when there is a lot of data on the page and under the screen. But suspended at the bottom of the window.
now uses css to locate at the bottom, but still follows the bottom of the table when there is little data or when the screen is large, rather than docking at the bottom all the time.
my own implementation idea is to determine the height gap between the bottom control and the upper table, and change the style if it is greater than 0. But how to get the height interval dynamically? Or is there any other way to implement it
navigate directly to the bottom
if compatibility is not required, I think we can try position:sticky; .
has been implemented, share the method.
the overall idea is:
get the window height, and then get the table height. If the height of the table > (window height-the height of the navigation bar above) indicates that the data exceeds the screen, position the pager absolutely to the bottom, otherwise follow the bottom of the table.
detailed steps are as follows:
step 1: document.documentElement.clientHeight gets the overall height of the browser.
Note here: I use vue, so use onresize to listen for window changes in mounted
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight
_this.fullHeight = window.fullHeight
_this.setPaginationStyle()
})()
}
step 2: define a ref attribute for your table, and this.$refs.myTable.$el.clientHeight gets the height of the table.
notice here that this.$refs.myTable.$el.clientHeight got the height before the data was populated (I was cheated for half a day here), so I got it again in vue's updated hook function. The specific methods are as follows:
/**
*
*/
setPaginationStyle:function () {
console.log('myTable',this.$refs.myTable)
console.log('clientHeight',this.$refs.myTable.$el.offsetHeight)
console.log('fullHeight',this.fullHeight)
// 704
if(this.fullHeight < 704){
this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
this.myTableStyle = 'margin-bottom:35px'
}else {
//table - +
if(this.$refs.myTable.$el.clientHeight < this.fullHeight - 320 ){
this.paginationStyle = 'background-color: white'
this.myTableStyle = 'margin-bottom:0px'
}else {
this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
this.myTableStyle = 'margin-bottom:35px'
}
}
}
