資料來源： https://code.google.com/p/jquery-tablepage/
- 這是一個針對JQuery所開發的表格分頁plugin,
- 主要目的是讓使用者能夠針對現有的資料表格,不需要更改過多的程式碼,即可輕易的加入分頁的功能.
使用說明
步驟1: 引用plugin檔案(這邊用1.0版)
<script src="jquery-tablepage-1.0.js"></script>
步驟2: 針對要分頁的table,與顯示頁碼的span,分別設定一個id(span放在妳想要顯示的位置)
<table id='table_source'>...</table> <span id='table_page'></span>
步驟3: 執行plugin
$("#table_source").tablepage($("#table_page"), 10);
第二個參數10,代表每一頁要顯示10筆資料
完成結果參考：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="">
<script src=""></script>
<title>Main</title>
<!-- // 引用 jQuery.js 和 jQuery-TablePage.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery-tablepage-1.0.js"></script>
</head>
<body>
<table id="tbl" border="1">
<thead>
<tr >
<th align="left" >Name</th>
<th align="left" >Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Content1</td>
<tr>
<tr>
<td>Name2</td>
<td>Content2</td>
<tr>
<tr>
<td>Name3</td>
<td>Content3</td>
<tr>
<tr>
<td>Name4</td>
<td>Content4</td>
<tr>
<tr>
<td>Name5</td>
<td>Content5</td>
<tr>
<tr>
<td>Name6</td>
<td>Content6</td>
<tr>
</tbody>
</table>
<!-- // 放分頁的 HTML 物件 -->
<span id='table_page'></span>
<!-- // 使用 TablePage 功能，參數1是放分頁的 HTML 物件，例如 span，參數2是每頁幾筆 -->
<script>
$("#tbl").tablepage($("#table_page"), 6);
</script>
</body>
<html>
沒有留言:
張貼留言