這是一個分頁(pagination)的表單程式，每5行就分出一頁，可以往前跳頁、往後跳頁，都成功了! 但是，不知道為何這Script程式放在Table之後才可以成功，若放在Head標頭就會失敗? 我已經嘗試將script移到head標頭好幾次了! 結果都一樣會失敗，只好恢復原位。

所使用的html程式碼是：

<table id="myTable">
	<tr>
		<th>Date</th>
		<th>Testing Progeam</th><th>Result</th>
	</tr>
	<tr>
		<td>2023.02.22</td>
		<td><a href="https://www.lohashare.com/popup-window-after-5s.html">1, Popup & Email in FormSubmit</a></td><td>No email</td>
	</tr>
	<tr>
		<td>2023.02.22</td>
		<td><a href="https://www.lohashare.com/popupwindowtest.html">2, Popup & Email in FormSubmit</a></td><td>No email</td>
	</tr>
	<tr>
		<td>JavaScript</td>
		<td>Code & Scripts</td>
                <td>Result</td>
	</tr>
	<tr>
		<td>row #4 col1</td>
		<td>row #4 col2</td>
                <td>row #4 col3</td>
	</tr>
	<tr>
		<td>row #5 col1</td>
		<td>row #5 col2</td>
                <td>row #5 col3</td>
	</tr>
	<tr>
		<td>row #6 col1</td>
		<td>row #6 col2</td>
                <td>row #6 col3</td>
	</tr>
	<tr>
		<td>row #7 col1</td>
		<td>row #7 col2</td>
                <td>row #7 col3</td>
	</tr>
	<tr>
		<td>row #8 col1</td>
		<td>row #8 col2</td>
                <td>row #8 col3</td>
	</tr>
	<tr>
		<td>row #9 col1</td>
		<td>row #9 col2</td>
                <td>row #9 col3</td>
	</tr>
	<tr>
		<td>row #10 col1</td>
		<td>row #10 col2</td>
                <td>row #10 col3</td>
	</tr>
	<tr>
		<td>row #11 col1</td>
		<td>row #11 col2</td>
                <td>row #11 col3</td>
	</tr>
	<tr>
		<td>row #12 col1</td>
		<td>row #12 col2</td>
                <td>row #12 col3</td>
	</tr>
	<tr>
		<td>row #13 col1</td>
		<td>row #13 col2</td>
                <td>row #13 col3</td>
	</tr>
	<tr>
		<td>row #14 col1</td>
		<td>row #14 col2</td>
                <td>row #14 col3</td>
	</tr>
	<tr>
		<td>row #15 col1</td>
		<td>row #15 col2</td>
                <td>row #15 col3</td>
	</tr>
	<tr>
		<td>row #16 col1</td>
		<td>row #16 col2</td>
                <td>row #16 col3</td>
	</tr>
</table>

<script src="./pagination/script.js" type="text/javascript"></script>

放在HTML網頁的table標籤中的id是myTable，它是來自表頭head標籤中的Style CSS，如下：

<link rel="stylesheet" href="pagination/style.css" type="text/css"/>

放在HTML網頁的script標籤來源src是來自Javascript程式，如下：

/*		=================================
**		==== Simple Table Controller ====
**		=================================
**
**
**			With Pure JavaScript .. 
**	 
**
**		No Libraries or Frameworks needed!
**
**
**				fb.com/bastony
**	
*/



// get the table element
var $table = document.getElementById("myTable"),
// number of rows per page
$n = 5,
// number of rows of the table
$rowCount = $table.rows.length,
// get the first cell's tag name (in the first row)
$firstRow = $table.rows[0].firstElementChild.tagName,
// boolean var to check if table has a head row
$hasHead = ($firstRow === "TH"),
// an array to hold each row
$tr = [],
// loop counters, to start count from rows[1] (2nd row) if the first row has a head tag
$i,$ii,$j = ($hasHead)?1:0,
// holds the first row if it has a (<TH>) & nothing if (<TD>)
$th = ($hasHead?$table.rows[(0)].outerHTML:"");
// count the number of pages
var $pageCount = Math.ceil($rowCount / $n);
// if we had one page only, then we have nothing to do ..
if ($pageCount > 1) {
	// assign each row outHTML (tag name & innerHTML) to the array
	for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
		$tr[$ii] = $table.rows[$i].outerHTML;
	// create a div block to hold the buttons
	$table.insertAdjacentHTML("afterend","<div id='buttons'></div");
	// the first sort, default page is the first one
	sort(1);
}

// ($p) is the selected page number. it will be generated when a user clicks a button
function sort($p) {
	/* create ($rows) a variable to hold the group of rows
	** to be displayed on the selected page,
	** ($s) the start point .. the first row in each page, Do The Math
	*/
	var $rows = $th,$s = (($n * $p)-$n);
	for ($i = $s; $i < ($s+$n) && $i < $tr.length; $i++)
		$rows += $tr[$i];
	
	// now the table has a processed group of rows ..
	$table.innerHTML = $rows;
	// create the pagination buttons
	document.getElementById("buttons").innerHTML = pageButtons($pageCount,$p);
	// CSS Stuff
	document.getElementById("id"+$p).setAttribute("class","active");
}


// ($pCount) : number of pages,($cur) : current page, the selected one ..
function pageButtons($pCount,$cur) {
	/* this variables will disable the "Prev" button on 1st page
	   and "next" button on the last one */
	var	$prevDis = ($cur == 1)?"disabled":"",
		$nextDis = ($cur == $pCount)?"disabled":"",
		/* this ($buttons) will hold every single button needed
		** it will creates each button and sets the onclick attribute
		** to the "sort" function with a special ($p) number..
		*/
		$buttons = "<input type='button' value='<< Prev' onclick='sort("+($cur - 1)+")' "+$prevDis+">";
	for ($i=1; $i<=$pCount;$i++)
		$buttons += "<input type='button' id='id"+$i+"'value='"+$i+"' onclick='sort("+$i+")'>";
	$buttons += "<input type='button' value='Next >>' onclick='sort("+($cur + 1)+")' "+$nextDis+">";
	return $buttons;
}

其中 style CSS 程式是以link方式引自style.CSS檔案，如下：

* {
  margin: 0;
  padding: 0;
  text-align:center;
}

body {
  background-color: #fafafa;
}

table {
  color: #333;
  font-size: .9em;
  font-weight: 300;
  line-height: 40px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #ed1c40;
  width: 500px;
  margin: 50px auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.16);
  border-radius: 2px;
}

th {
  background: #ed1c40;
  color: #fff;
  border: none;
}

tr:hover:not(th) {background-color: rgba(237,28,64,.1);}


input[type="button"] {
	transition: all .3s;
    border: 1px solid #ddd;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
	font-size: 15px;
}

input[type="button"]:not(.active) {
	background-color:transparent;
}

.active {
	background-color: #ff4d4d;
	color :#fff;
}

input[type="button"]:hover:not(.active) {
	background-color: #ddd;
}

最後所呈現的畫面是在這個測試網址：https://www.lohashare.com/tablepaginationtest.html