Code Learning: jQuery-分頁顯示

資料來源： 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>

Code Learning

2016年7月20日星期三

jQuery-分頁顯示

資料來源： https://code.google.com/p/jquery-tablepage/

沒有留言:

張貼留言

2016年7月20日 星期三

jQuery-分頁顯示

資料來源： https://code.google.com/p/jquery-tablepage/

沒有留言:

張貼留言

2016年7月20日星期三