1. Home
  2. Coding
  3. Cara Membuat Auto Scroll Infinite Table Row dengan jQuery

Cara Membuat Auto Scroll Infinite Table Row dengan jQuery

  • 12 September 2024
  • reading
  • Agung Siswanto
Tutorial Membuat Auto Scroll Infinite Table Row dengan jQuery, Cara Membuat Auto Scroll Infinite Table Row dengan jQuery, How to Make Auto Scroll Infinite Table Row with jQuery
Share this Post:

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>
  1. Tambah jQuery Khusus untuk Auto Scroll nya.
<script src="js/jquery-scroll.js"></script>
  1. 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>
  1. 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

Tutorial Membuat Auto Scroll Infinite Table Row dengan jQuery, Cara Membuat Auto Scroll Infinite Table Row dengan jQuery, How to Make Auto Scroll Infinite Table Row with jQuery
Cara Menghilangkan url Index.php di Codeigniter
Tutorial Membuat Auto Scroll Infinite Table Row dengan jQuery, Cara Membuat Auto Scroll Infinite Table Row dengan jQuery, How to Make Auto Scroll Infinite Table Row with jQuery
Daftar Kode Bal Segel Baju Import

Image
Agung Siswanto Hallo! 👋, saya Agung seorang Web Developer, suka membuat artikel berupa tutorial sebagai contekan untuk ngoding sehari-hari 😂.


Artikel Popular

Daftar Kode Bal Segel Baju Import
Others   12 Sep 2024
Cara Membuat Auto Scroll Infinite Table Row dengan jQuery
Coding   12 Sep 2024
Codeigniter - Cara membuat AutoComplete dengan Menggunakan JQuery UI
Codeigniter 3   12 Sep 2024
Cara Install MongoDB PHP Driver di Windows
Coding   12 Sep 2024
Tutorial Cara Membuat Google Recaptcha V3 Laravel Step by Step
Laravel   12 Sep 2024

Kategori

Teknologi 5
Tips & Trik 7
Coding 5
Windows 2
Flutter 3
Node Js 3
React Js 1
Codeigniter 3 2
Aquascape 1
Laravel 6
Rekomendasi 2
Others 4

Anda ingin menghubungi kami?