<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>艾德的部落格天空 &#187; Javascript</title>
	<atom:link href="http://edblog.net/archives/category/web-20/javascript-web-20/feed" rel="self" type="application/rss+xml" />
	<link>http://edblog.net</link>
	<description>亂寫、亂拍、亂來。 --- 持續亂改更新中 ---</description>
	<lastBuildDate>Mon, 05 Dec 2011 08:03:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>酷炫的Js排序分頁功能-TinyTable JS</title>
		<link>http://edblog.net/archives/2012</link>
		<comments>http://edblog.net/archives/2012#comments</comments>
		<pubDate>Thu, 11 Jun 2009 01:50:12 +0000</pubDate>
		<dc:creator>Eduardo</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[TinyTable]]></category>
		<category><![CDATA[分頁]]></category>
		<category><![CDATA[排序]]></category>

		<guid isPermaLink="false">http://edblog.net/?p=2012</guid>
		<description><![CDATA[這幾天嘗試把魔獸英雄榜的公會資料成員抓下來玩，抓回來的樣子如下 http://i-joyland.com/wowparty/list.php 然後改成將資料寫入DB 再另外撈出來 當然撈出來的樣子也是一樣。 上網尋找到一個透過 JS 就可達到各欄位排序及分頁的功能 TinyTable JavaScript Table Sorter 重點是JS只有 2.5KB，只要在頁面上加上簡單的語法就可以做出欄位排序及不同數量顯示分頁的功能了。 看起來應該是將所有資料撈出來後透過JS處理，不過當筆數變很大量時，能不能即時處理呢@@.. 套用之後的結果 http://i-joyland.com/wowparty/search.php 官網的demo 這功能很不錯，可以多玩玩 XD<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="修改 WordPress 內建 widgets 的分類排序" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1036&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8084188.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">修改 WordPress 內建 widgets 的分類排序</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[教學] WordPress Comment 分頁模式" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F919&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8078166.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[教學] WordPress Comment 分頁模式</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[WordPress] 單篇文章分頁模式教學" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1121&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[WordPress] 單篇文章分頁模式教學</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebSlug 網頁載入大車拼" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1307&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8085590.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebSlug 網頁載入大車拼</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>這幾天嘗試把魔獸英雄榜的公會資料成員抓下來玩，抓回來的樣子如下</p>
<p><a href="http://i-joyland.com/wowparty/list.php" target="_blank">http://i-joyland.com/wowparty/list.php</a></p>
<p>然後改成將資料寫入DB</p>
<p>再另外撈出來</p>
<p>當然撈出來的樣子也是一樣。</p>
<p>上網尋找到一個透過 JS 就可達到各欄位排序及分頁的功能</p>
<p><a href="http://www.leigeber.com/2009/03/table-sorter/" target="_blank"><strong>TinyTable JavaScript Table Sorter</strong></a></p>
<p><img class="alignnone size-full wp-image-2013" title="table-sorter" src="http://edblog.net/wp-content/uploads/2009/06/table-sorter.jpg" alt="table-sorter" width="524" height="209" /></p>
<p>重點是JS只有 2.5KB，只要在頁面上加上簡單的語法就可以做出欄位排序及不同數量顯示分頁的功能了。</p>
<p>看起來應該是將所有資料撈出來後透過JS處理，不過當筆數變很大量時，能不能即時處理呢@@..</p>
<p>套用之後的結果</p>
<p><a href="http://i-joyland.com/wowparty/search.php" target="_blank">http://i-joyland.com/wowparty/search.php</a></p>
<p>官網的<a href="http://sandbox.leigeber.com/table-sorter/index.html" target="_blank">demo</a></p>
<p>這功能很不錯，可以多玩玩 XD</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="修改 WordPress 內建 widgets 的分類排序" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1036&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8084188.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">修改 WordPress 內建 widgets 的分類排序</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[教學] WordPress Comment 分頁模式" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F919&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8078166.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[教學] WordPress Comment 分頁模式</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[WordPress] 單篇文章分頁模式教學" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1121&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[WordPress] 單篇文章分頁模式教學</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebSlug 網頁載入大車拼" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1307&from=http%3A%2F%2Fedblog.net%2Farchives%2F2012">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8085590.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebSlug 網頁載入大車拼</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table><p><script type="text/javascript"><!--
google_ad_client = "pub-0799927170161891";
/* 336x280, ??? 2009/4/8 */
google_ad_slot = "0733953819";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p> ]]></content:encoded>
			<wfw:commentRss>http://edblog.net/archives/2012/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

