:::

4. 表格內容排序

一、TinyTable V3官網

http://www.leigeber.com/2009/11/advanced-javascript-table-sorter/

二、基本結構

<link rel="stylesheet" href="tinytable/tinytable.css" />
<table id="my_table" class="tinytable">
    <thead>
      <tr>
        <th class="nosort"><h3>編號</h3></th>
        <th><h3>開課單位</h3></th>
        <th><h3>學程</h3></th>
      </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>台南社大</td><td>資訊學程</td></tr>
        <tr><td>2</td><td>台南社大</td><td>美學學程</td></tr>
        <tr><td>3</td><td>台江校區</td><td>環境學程</td></tr>
    </tbody>
  </table>

三、必要元件

<div id="tablenav"><select id="pagedropdown"></select></div>
<span id="currentpage"></span>
<span id="totalpages"></span>
<select id="columns" onchange="sorter.search('query')"></select>
<input type="text" id="query" onkeyup="sorter.search('query')" />
<span id="startrecord"></span>
<span id="endrecord"></span>
<span id="totalrecords"></span>
<a href="javascript:sorter.reset()">重來</a>
頁面選單
目前頁數
所有頁數
搜尋欄位
搜尋欄位值輸入框
目前的起始資料
目前的結束資料
所有資料筆數
回到初始狀態

四、必要參數(請加在表格下方)

<script type="text/javascript" src="tinytable/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','my_table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true, size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:0,
sortdir:1,
init:true
});
</script>

五、選用參數(可加在sortdir:1,之後)

sum:[4],
avg:[4,5],
columns:[{index:4, format:'$', decimals:0}],
加總
平均
顯示格式

六、選用元件

<img src="tinytable/images/first.gif"  alt="最前頁" onclick="sorter.move(-1,true)" />
<img src="tinytable/images/previous.gif"  alt="上一頁" onclick="sorter.move(-1)" />
<img src="tinytable/images/next.gif" alt="下一頁" onclick="sorter.move(1)" />
<img src="tinytable/images/last.gif" alt="最後頁" onclick="sorter.move(1,true)" />
<a href="javascript:sorter.showall()">顯示全部</a>
<select onchange="sorter.size(this.value)">
    <option value="5">5</option>
    <option value="10" selected="selected">10</option>
    <option value="20">20</option>
</select>
最前頁
上一頁
下一頁
最後頁
顯示全部
每頁秀出筆數選擇



 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

12人線上 (5人在瀏覽線上書籍)

會員: 1

訪客: 11

person100_goo,

更多…