I have created a custom element
for page number and using prepopulate the value with current page number
and total page number. But how can i change the page number value
when i change page using scroll down or going to next page. Is there any event
we get when page changes so that i can update my value in custom element?
If i am having the wrong approach please correct me? Below is the code for reference.
header.push({
type: 'customElement',
title:'Page',
render: function() {
var slider = document.createElement('input');
slider.type = 'text';
slider.value = currentPage;
slider.tabindex="-1";
slider.style="width: 11.5px; border:none; font-size: medium; margin-top: -1px;";
slider.oninput = function() {
console.log('---oninput---');
};
slider.addEventListener("keyup", function(event) {
console.log('---keyup---');
});
var pageNum = document.createElement('input');
pageNum.type = 'text';
pageNum.value = " / " + TotalPageNumber;
pageNum.tabindex="-1";
pageNum.style="width: 30px; border:none; font-size: medium; margin-top: -1px;";
pageNum.oninput = function() {
console.log('---oninput---');
};
pageNum.addEventListener("keyup", function(event) {
console.log('---keyup---');
});
var form = document.createElement('div');
form.style="display: flex; border-radius: 10px;padding: 10px;cursor: pointer;";
form.appendChild(slider);
form.appendChild(pageNum);
return form;
// return slider;
}
});
Regards
Abhishek Maurya