DataTable New Feature - Data loading without scroll and pagination

[MassiveTM]

Hello,

my name is Riccardo and I'm a Full Stack Developer that use Primefaces every day.

I'm using Primefaces 10.0.5

I found a sort kind of limitation using the DataTable with Live Scroll. Certainly, viewing just a chunck of data, is a must in the 2021 web developing.
But I think that using a scrollable dataTable is not that great, if I want to use my website on tablet or if I want to use the vertical scroll of the page.
So I start finding a trick and a great example of the result is the DataScroller with the loader.
Logically the dataScroller have a lot of limitation and it's not the same as a classic Table.

Starting from that, I try to trick the framework to permit the LiveScroll without scroll and using a button to make the framework believe that at the click of the button, I actually got to the bottom with the scrollBar.

Let's see come image of the result : https://imgur.com/a/fvSuSAY

So, i decide to use StyleClass to catch the dataTable and the button to add the trigger. I'm not a Javascript PRO, so I try my best to ovveride just some piece of code, and let the other dataTable works
like the framework was.

Code: Select all

//MASSIVETM - Part of the code  to catch the datatable with specific styleClass , load the trigger and fool the framework to use LiveScroll without a Scroll.

if(PrimeFaces.widget.DataTable) {
	PrimeFaces.widget.DataTable	= PrimeFaces.widget.DataTable.extend({
		setupScrolling: function() {
			this._super();
			if(this.jq.hasClass("datatable-add-rows-with-button") && this.jq.hasClass("ui-datatable-scrollable")){
				this.loadTrigger = this.jq.parent().find(".datatable-button-add-rows");
				if(this.loadTrigger.length != 0){
					this.shouldLiveScroll = false;
					this.prepareButton();
					var checkReload = this.tbody[0].rows.length - this.jq.find('tr.ui-datatable-empty-message').length - this.getRowGroup(this);
					if(this.hideButton(this) && checkReload > 0 && checkReload >= this.cfg.scrollLimit || this.cfg.scrollLimit == 0){
						this.loadTrigger.hide(); 
					}
	            }else{
	            	console.warn("Se viene utilizzata la tabella scrollable con .datatable-add-rows-with-button, il bottone con styleClass .datatable-button-add-rows e' obbligatorio!");
	            }
			}
			return;
		},prepareButton: function() {
			var a = this;
        	a.prepareTableRows(false);
	        this.loadTrigger.on((/(mobile|android)/i.test(navigator.userAgent)) ? 'touchend' : 'click', function(b) {
	            a.loadLiveRows();
        		a.prepareTableRows(true);
	            if(!a.liveScrollActive  || a.hideButton(a)){
	            	a.loadTrigger.hide();
	            }
	            else
		            if(!a.liveScrollActive  || !a.hideButton(a)){
		            	a.loadTrigger.show();
					}
				a.loadTriggered = true;
	        })
	    },prepareTableRows : function(click){
	    	if(click == false){
				this.checkReloadingTable(this);
	    	}
			var loadedRows = 0;
			var totalRows = this.cfg.scrollLimit;
			if(totalRows != 0) {
				if(this.hideButton(this)){
					if(this.scrollOffset != 0 && !this.hideButton(this))
						loadedRows = this.scrollOffset;
					else
						loadedRows = totalRows;
				}
				else {
					if(click == true){
						if(this.scrollOffset + this.cfg.scrollStep < this.tbody[0].rows.length - this.getRowGroup(this)){
							this.scrollOffset = this.tbody[0].rows.length - this.getRowGroup(this);
						}
						loadedRows = this.scrollOffset + this.cfg.scrollStep;
					}
					else{
						loadedRows = this.scrollOffset +  this.cfg.scrollStep;
					}
				}
			}
			this.prepareRowInfo(loadedRows,totalRows);
		},checkReloadingTable:function(a){
	 		var rowGroup = a.getRowGroup(a);
	 		if(a.tbody[0].rows.length - rowGroup > a.cfg.scrollStep)
	 			a.scrollOffset = (a.tbody[0].rows.length - rowGroup) - a.cfg.scrollStep;
		},prepareRowInfo : function(loadedRows,totalRows){
			(this.loadTrigger.parent().parent().find(".datatable-rows-info-loaded"))[0].innerHTML = loadedRows;
			(this.loadTrigger.parent().parent().find(".datatable-rows-info-totals"))[0].innerHTML = totalRows;
		},getRowGroup:function(a){
	 		var rowGroup = a.jq.find('tr.ui-rowgroup-header').length;
	 		if(rowGroup == null)
	 			rowGroup = 0;
	 		
	 		return rowGroup;
		},hideButton: function(a){
	    	return (a.scrollOffset + a.cfg.scrollStep) >= a.cfg.scrollLimit;
	    },postUpdateData: function () {
			this._super();
			if (!this.loadTriggered) {
				return;
			}
			this.loadTriggered = false;
			var rgh = this.tbody.children("tr.ui-rowgroup-header").last(),
				rgt = rgh.find("> td:first > a.ui-rowgroup-toggler");
			if (rgt.length === 0) {
				return;
			}
			if (rgt.attr("aria-expanded") === "false") {
				rgt.click();
			}
			this.tbody.resize();
		}
	});
}

That's just a piece of code to try to replicate the entire structure and find a better way to implement it.
What do you think?

Thank you very much, and I hope that this could be used on the next primefaces

Riccardo - MassiveTM

[Melloware]

Why not submit this as a PR on GitHub?? See: https://github.com/primefaces/primefaces/issues

[MassiveTM]

Why not submit this as a PR on GitHub?? See: https://github.com/primefaces/primefaces/issues

Hi Melloware, I create a new Issue - New Feature in github. I though that somebody need to review that kind of request Thank you