Relax - Free to Play - Nature - Caffein Addict
Cara Membuat Auto Scroll Infinite Table Row dengan jQuery
Posted at 25 August 2020


Share : Share this page on Facebook Share this page on Twitter

Pada kesempatan ini Bang Agung mau berbagi tutorial untuk Cara Membuat Auto Scroll Infinite Table Row dengan jQuery. tutorial ini didasari dari pengalaman pribadi ngoding jadi sekalian aja di buatin tutorialnya plus jadiin catetan *curcol wkwk.

DEMO 

1. Buat dulu HTML beserta include file css dan js (Boostrap) untuk mempercantik tampilan.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Auto Scroll Infinite Table Row</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>

	<div class="contain table-responsive">
		<table class="table">
			<thead>
		      	<tr>
		            <th>NO</th>
		            <th>TICKET NO.</th>
		            <th>REQUESTER</th>
		            <th>CREATED ON</th>
		            <th>EXPECTED DATE</th>
		            <th>DIVISI</th>
		            <th>SUBJECT</th>
		            <th>DETAIL</th>
		            <th>PIC</th>
		            <th>STATUS</th>
		        </tr>
		    </thead>
			<tbody>
				<tr>
					<td>1</td>
		            <td>TICKET NO. 1</td>
		            <td>REQUESTER 1</td>
		            <td>CREATED ON 1</td>
		            <td>EXPECTED DATE 1</td>
		            <td>DIVISI 1</td>
		            <td>SUBJECT 1</td>
		            <td>DETAIL 1</td>
		            <td>PIC 1</td>
		            <td>STATUS 1</td>
				</tr>
				<tr>
					<td>2</td>
		            <td>TICKET NO. 2</td>
		            <td>REQUESTER 2</td>
		            <td>CREATED ON 2</td>
		            <td>EXPECTED DATE 2</td>
		            <td>DIVISI 2</td>
		            <td>SUBJECT 2</td>
		            <td>DETAIL 2</td>
		            <td>PIC 2</td>
		            <td>STATUS 2</td>
				</tr>
				<tr>
					<td>3</td>
		            <td>TICKET NO. 3</td>
		            <td>REQUESTER 3</td>
		            <td>CREATED ON 3</td>
		            <td>EXPECTED DATE 3</td>
		            <td>DIVISI 3</td>
		            <td>SUBJECT 3</td>
		            <td>DETAIL 3</td>
		            <td>PIC 3</td>
		            <td>STATUS 3</td>
				</tr>
				<tr>
					<td>4</td>
		            <td>TICKET NO. 4</td>
		            <td>REQUESTER 4</td>
		            <td>CREATED ON 4</td>
		            <td>EXPECTED DATE 4</td>
		            <td>DIVISI5 4</td>
		            <td>SUBJECT 4</td>
		            <td>DETAIL 4</td>
		            <td>PIC 4</td>
		            <td>STATUS 4</td>
				</tr>
				<tr>
					<td>5</td>
		            <td>TICKET NO. 5</td>
		            <td>REQUESTER 5</td>
		            <td>CREATED ON 5</td>
		            <td>EXPECTED DATE 5</td>
		            <td>DIVISI 5</td>
		            <td>SUBJECT 5</td>
		            <td>DETAIL 5</td>
		            <td>PIC 5</td>
		            <td>STATUS 5</td>
				</tr>
				<tr>
					<td>6</td>
		            <td>TICKET NO. 6</td>
		            <td>REQUESTER 6</td>
		            <td>CREATED ON 6</td>
		            <td>EXPECTED DATE 6</td>
		            <td>DIVISI 6</td>
		            <td>SUBJECT 6</td>
		            <td>DETAIL 6</td>
		            <td>PIC 6</td>
		            <td>STATUS 6</td>
				</tr>
				<tr>
					<td>7</td>
		            <td>TICKET NO. 7</td>
		            <td>REQUESTER 7</td>
		            <td>CREATED ON 7</td>
		            <td>EXPECTED DATE 7</td>
		            <td>DIVISI 7</td>
		            <td>SUBJECT 7</td>
		            <td>DETAIL 7</td>
		            <td>PIC 7</td>
		            <td>STATUS 7</td>
				</tr>
				<tr>
					<td>8</td>
		            <td>TICKET NO. 8</td>
		            <td>REQUESTER 8</td>
		            <td>CREATED ON 8</td>
		            <td>EXPECTED DATE 8</td>
		            <td>DIVISI 8</td>
		            <td>SUBJECT 8</td>
		            <td>DETAIL 8</td>
		            <td>PIC 8</td>
		            <td>STATUS 8</td>
				</tr>
				<tr>
					<td>9</td>
		            <td>TICKET NO. 9</td>
		            <td>REQUESTER 9</td>
		            <td>CREATED ON 9</td>
		            <td>EXPECTED DATE 9</td>
		            <td>DIVISI 9</td>
		            <td>SUBJECT 9</td>
		            <td>DETAIL 9</td>
		            <td>PIC 9</td>
		            <td>STATUS 9</td>
				</tr>
				<tr>
					<td>10</td>
		            <td>TICKET NO. 10</td>
		            <td>REQUESTER 10</td>
		            <td>CREATED ON 10</td>
		            <td>EXPECTED DATE 10</td>
		            <td>DIVISI 10</td>
		            <td>SUBJECT 10</td>
		            <td>DETAIL 10</td>
		            <td>PIC 10</td>
		            <td>STATUS 10</td>
				</tr>
			</tbody>
		</table>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
2. Tambah jQuery Khusus untuk Auto Scroll nya.
<script src="js/jquery-scroll.js"></script>
3. Tambahkan CSS.
<style>
        .contain{
			height: 400px; 
			width: 100%;
			overflow: auto;
		}

		.contain table thead th {
			position: sticky; 
			top: 0; 
			background: #eee;
			border-top: 0px;
		}

		table{
			line-height: 2.4; 
			font-size: 14px; 
			text-align: center;
		}

		th {
			 background-color: #eee;
		}

		td {
			width: 10%;
			text-align: center;
		}
</style>
4. Tambahkan Function untuk jQuery Auto Scrollnya.
<script>
        jQuery.fn.extend({
	        pic_scroll:function (){
	            $(this).each(function(){
	                var _this=$(this);
	                var ul=_this.find("table");
	                var li=ul.find("tbody");
	                var w=li.size()*li.outerHeight();
	                li.clone().prependTo(ul);
	                var i=1,l;
	                _this.hover(function(){i=0},function(){i=1});
	                function autoScroll(){
	                	l = _this.scrollTop();
	                	if(l>=w){
	                		_this.scrollTop(0);
	                	}else{
	                		_this.scrollTop(l + i);
	                	}
	                }
	                var scrolling = setInterval(autoScroll,20);
	            })
	        }
	    });
		$(function(){
			// var time1 = new Date;
			$(".contain").pic_scroll();
		})
</script>
Maka hasil akhir seluruh codingan akan seperti ini:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Auto Scroll Infinite Table Row</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	<style type="text/css">
		.contain{
			height: 400px; 
			width: 100%;
			overflow: auto;
		}

		.contain table thead th {
			position: sticky; 
			top: 0; 
			background: #eee;
			border-top: 0px;
		}

		table{
			line-height: 2.4; 
			font-size: 14px; 
			text-align: center;
		}

		th {
			 background-color: #eee;
		}

		td {
			width: 10%;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="contain table-responsive">
		<table class="table">
			<thead>
		      	<tr>
		            <th>NO</th>
		            <th>TICKET NO.</th>
		            <th>REQUESTER</th>
		            <th>CREATED ON</th>
		            <th>EXPECTED DATE</th>
		            <th>DIVISI</th>
		            <th>SUBJECT</th>
		            <th>DETAIL</th>
		            <th>PIC</th>
		            <th>STATUS</th>
		        </tr>
		    </thead>
			<tbody>
				<tr>
					<td>1</td>
		            <td>TICKET NO. 1</td>
		            <td>REQUESTER 1</td>
		            <td>CREATED ON 1</td>
		            <td>EXPECTED DATE 1</td>
		            <td>DIVISI 1</td>
		            <td>SUBJECT 1</td>
		            <td>DETAIL 1</td>
		            <td>PIC 1</td>
		            <td>STATUS 1</td>
				</tr>
				<tr>
					<td>2</td>
		            <td>TICKET NO. 2</td>
		            <td>REQUESTER 2</td>
		            <td>CREATED ON 2</td>
		            <td>EXPECTED DATE 2</td>
		            <td>DIVISI 2</td>
		            <td>SUBJECT 2</td>
		            <td>DETAIL 2</td>
		            <td>PIC 2</td>
		            <td>STATUS 2</td>
				</tr>
				<tr>
					<td>3</td>
		            <td>TICKET NO. 3</td>
		            <td>REQUESTER 3</td>
		            <td>CREATED ON 3</td>
		            <td>EXPECTED DATE 3</td>
		            <td>DIVISI 3</td>
		            <td>SUBJECT 3</td>
		            <td>DETAIL 3</td>
		            <td>PIC 3</td>
		            <td>STATUS 3</td>
				</tr>
				<tr>
					<td>4</td>
		            <td>TICKET NO. 4</td>
		            <td>REQUESTER 4</td>
		            <td>CREATED ON 4</td>
		            <td>EXPECTED DATE 4</td>
		            <td>DIVISI5 4</td>
		            <td>SUBJECT 4</td>
		            <td>DETAIL 4</td>
		            <td>PIC 4</td>
		            <td>STATUS 4</td>
				</tr>
				<tr>
					<td>5</td>
		            <td>TICKET NO. 5</td>
		            <td>REQUESTER 5</td>
		            <td>CREATED ON 5</td>
		            <td>EXPECTED DATE 5</td>
		            <td>DIVISI 5</td>
		            <td>SUBJECT 5</td>
		            <td>DETAIL 5</td>
		            <td>PIC 5</td>
		            <td>STATUS 5</td>
				</tr>
				<tr>
					<td>6</td>
		            <td>TICKET NO. 6</td>
		            <td>REQUESTER 6</td>
		            <td>CREATED ON 6</td>
		            <td>EXPECTED DATE 6</td>
		            <td>DIVISI 6</td>
		            <td>SUBJECT 6</td>
		            <td>DETAIL 6</td>
		            <td>PIC 6</td>
		            <td>STATUS 6</td>
				</tr>
				<tr>
					<td>7</td>
		            <td>TICKET NO. 7</td>
		            <td>REQUESTER 7</td>
		            <td>CREATED ON 7</td>
		            <td>EXPECTED DATE 7</td>
		            <td>DIVISI 7</td>
		            <td>SUBJECT 7</td>
		            <td>DETAIL 7</td>
		            <td>PIC 7</td>
		            <td>STATUS 7</td>
				</tr>
				<tr>
					<td>8</td>
		            <td>TICKET NO. 8</td>
		            <td>REQUESTER 8</td>
		            <td>CREATED ON 8</td>
		            <td>EXPECTED DATE 8</td>
		            <td>DIVISI 8</td>
		            <td>SUBJECT 8</td>
		            <td>DETAIL 8</td>
		            <td>PIC 8</td>
		            <td>STATUS 8</td>
				</tr>
				<tr>
					<td>9</td>
		            <td>TICKET NO. 9</td>
		            <td>REQUESTER 9</td>
		            <td>CREATED ON 9</td>
		            <td>EXPECTED DATE 9</td>
		            <td>DIVISI 9</td>
		            <td>SUBJECT 9</td>
		            <td>DETAIL 9</td>
		            <td>PIC 9</td>
		            <td>STATUS 9</td>
				</tr>
				<tr>
					<td>10</td>
		            <td>TICKET NO. 10</td>
		            <td>REQUESTER 10</td>
		            <td>CREATED ON 10</td>
		            <td>EXPECTED DATE 10</td>
		            <td>DIVISI 10</td>
		            <td>SUBJECT 10</td>
		            <td>DETAIL 10</td>
		            <td>PIC 10</td>
		            <td>STATUS 10</td>
				</tr>
			</tbody>
		</table>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

     // jQuery Auto Scroll
	<script src="js/jquery-scroll.js"></script>
	<script type="text/javascript">
		jQuery.fn.extend({
	        pic_scroll:function (){
	            $(this).each(function(){
	                var _this=$(this);
	                var ul=_this.find("table");
	                var li=ul.find("tbody");
	                var w=li.size()*li.outerHeight();
	                li.clone().prependTo(ul);
	                var i=1,l;
	                _this.hover(function(){i=0},function(){i=1});
	                function autoScroll(){
	                	l = _this.scrollTop();
	                	if(l>=w){
	                		_this.scrollTop(0);
	                	}else{
	                		_this.scrollTop(l + i);
	                	}
	                }
	                var scrolling = setInterval(autoScroll,20);
	            })
	        }
	    });
		$(function(){
			// var time1 = new Date;
			$(".contain").pic_scroll();
		})
	</script>
</body>
</html>

Selesai, coba untuk jalankan maka hasilnya akan seperti yang ada di demo. untuk yang mau saya sertakan file yang bisa di download.

Selebihnya bisa di ubah sesuai keinginan dan kebutuhan masing-masing. terimakasih semoga bisa bermanfaat.

DEMO | DOWNLOAD

Artikel Lainnya