<?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>╭╰Original　Colors╯╮ - 认真工作 &#187; Sortable Table</title>
	<atom:link href="http://www.iros.me/tag/sortable-table/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iros.me</link>
	<description>show the colorsssssss in my WORK</description>
	<lastBuildDate>Fri, 09 Sep 2011 06:29:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Sortable Table 可排序表格JS收集</title>
		<link>http://www.iros.me/sortable-table-js-collection.html</link>
		<comments>http://www.iros.me/sortable-table-js-collection.html#comments</comments>
		<pubDate>Wed, 12 Nov 2008 05:11:17 +0000</pubDate>
		<dc:creator>ponytail</dc:creator>
				<category><![CDATA[┨Cooooollection]]></category>
		<category><![CDATA[┨Java Script]]></category>
		<category><![CDATA[collection]]></category>
		<category><![CDATA[Jquery]]></category>
		<category><![CDATA[Sortable Table]]></category>
		<category><![CDATA[排序]]></category>
		<category><![CDATA[收集]]></category>
		<category><![CDATA[表格]]></category>

		<guid isPermaLink="false">http://www.originalcolors.cn/work/?p=166</guid>
		<description><![CDATA[最近在整理我的抓马列表，几千条排进表格里给人看，不能排序查找的话比较头痛，于是就去找了找，JS还真是什么都能做哇~~整理一下~~ 1. sortabe.js 最简单的，我现在试用的就是这个，加载JS后给TABLE加上class=&#8221;sortable&#8221;就OK了，点击&#60;th&#62;相应栏目就可以排序~~ 2. DrasticGrid AJAX应用，与MySQL结合可以实现分页、排序、编辑以及增删功能，太强大了，图里可以看到滚动条的分页效果 3. Ingrid 这个是Jquery的应用，样子我最喜欢的了，而且列宽可以拖动调节，分页及排序都有LOADING效果的 4. Tablesorter 同样是Jquery应用，样子不错，还可以设置初始排序条件 5. TableSorter Jquery应用，可以在JS调用里做出各种样式设置，作者写的很具体 6. Table Sorting Jquery应用，可以对N个TBODY分别排序，可分页，可根据条件筛选显示内容，数据量大时，比其他相同应用速度要快，这个是作者说滴，还给了个500行的例子 7. TableSort (revisited) 功能好~强大，作者的说明页面好~长，请细心查看~ ============================== 2009.11.18 新增 8. TinyTable V3 体积小，功能全~ 还有IE6兼容，呵呵，好物~~ 2010.01.07 新增 9. jTPS 翻页是滚动效果的，速度挺快，IE6也OK~ 表格排序有好多好多方法啊，MOO啊PROTO啊YUI啊一堆一堆的，不过我暂时还只能看看Jquery相关，已经眼花了都。。。 虽然现在试用第一种，不过还是第三个最中意，说不定换换玩~~ 标签：collection, Jquery, Sortable Table, 排序, 收集, 表格<table class="wumii-related-items" cellspacing="0" cellpadding="2" border="0" width="100%" style="clear: both;">
    
    <tr>
        <td ><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Flight-box-effect-js-collection-jquery-related.html&from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1" color="#666666" style="line-height: 1.65em; font-size: 12px !important;">LIGHT BOX效果JS大集合（Jquery相关）</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-java-script-collection.html&from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1" color="#666666" style="line-height: 1.65em; font-size: 12px !important;">JAVA Script 效果收集</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-wordpress-theme-collection-part2.html&from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1" color="#666666" style="line-height: 1.65em; font-size: 12px !important;">Wordpress 主题收集 PART 2</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-wordpress-themes-collection.html&from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1" color="#666666" style="line-height: 1.65em; font-size: 12px !important;">Wordpress 主题收集（2008.12.15更新）</font>
                    </a>
                </td>
            </tr>
    
    <tr>
        <td  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>最近在整理我的抓马列表，几千条排进表格里给人看，不能排序查找的话比较头痛，于是就去找了找，JS还真是什么都能做哇~~整理一下~~</p>
<p>1. <a  href="http://woork.blogspot.com/2008/02/sort-table-rows-using-ajax.html" target="_blank">sortabe.js</a> 最简单的，我现在试用的就是这个，加载JS后给TABLE加上class=&#8221;sortable&#8221;就OK了，点击&lt;th&gt;相应栏目就可以排序~~</p>
<p><img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh3.gouride.com%2F_SAtXNAuCabM%2FSRpS9lUyZMI%2FAAAAAAAAAkY%2FiOtj7KjCTc0%2Fsort1.jpg?imgmax=800"  alt="sort1.jpg" /></p>
<p><span id="more-166" ></span>2. <a  href="http://www.drasticdata.nl/DDDrasticGrid.php" target="_blank">DrasticGrid</a> AJAX应用，与MySQL结合可以实现分页、排序、编辑以及增删功能，太强大了，图里可以看到滚动条的分页效果</p>
<p><img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh6.gouride.com%2F_SAtXNAuCabM%2FSRpS9xRsVII%2FAAAAAAAAAkg%2FfFvCTOLWLpk%2Fsort2.jpg?imgmax=800"  alt="sort2.jpg" /></p>
<p>3. <a  href="http://www.reconstrukt.com/ingrid/index.html" target="_blank">Ingrid</a> 这个是Jquery的应用，样子我最喜欢的了，而且列宽可以拖动调节，分页及排序都有LOADING效果的<img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh5.gouride.com%2F_SAtXNAuCabM%2FSRpS92gPNXI%2FAAAAAAAAAko%2F4akYF84B_Ik%2Fsort3.jpg?imgmax=800"  alt="sort3.jpg" /></p>
<p>4. <a  href="http://tablesorter.com/docs/" target="_blank">Tablesorter</a> 同样是Jquery应用，样子不错，还可以设置初始排序条件<img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh4.gouride.com%2F_SAtXNAuCabM%2FSRpT0mW3GDI%2FAAAAAAAAAlA%2F1sJnHckU-1Q%2Fsort6.jpg?imgmax=800"  alt="sort6.jpg" /></p>
<p>5. <a  href="http://motherrussia.polyester.se/docs/tablesorter/" target="_blank">TableSorter</a> Jquery应用，可以在JS调用里做出各种样式设置，作者写的很具体<img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh6.gouride.com%2F_SAtXNAuCabM%2FSRpS-sIhcEI%2FAAAAAAAAAk4%2FH03RNMCP7HI%2Fsort5.jpg?imgmax=800"  alt="sort5.jpg" /></p>
<p>6. <a  href="http://www.javascripttoolbox.com/lib/table/examples.php" target="_blank">Table Sorting</a> Jquery应用，可以对N个TBODY分别排序，可分页，可根据条件筛选显示内容，数据量大时，比其他相同应用速度要快，这个是作者说滴，还给了个500行的例子<img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh6.gouride.com%2F_SAtXNAuCabM%2FSRpS-dpSaYI%2FAAAAAAAAAkw%2FQfv63_mnJC8%2Fsort4.jpg?imgmax=800"  alt="sort4.jpg" /></p>
<p>7. <a  href="http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited/" target="_blank">TableSort (revisited)</a> 功能好~强大，作者的说明页面好~长，请细心查看~<img class="pie-img"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh3.gouride.com%2F_SAtXNAuCabM%2FSRpT0_SV8NI%2FAAAAAAAAAlI%2FFOSVSl7Ye38%2Fsort7.jpg?imgmax=800"  alt="sort7.jpg" /></p>
<p>==============================</p>
<p><strong>2009.11.18 新增</strong></p>
<p>8. <a  href="http://www.leigeber.com/2009/11/advanced-javascript-table-sorter/" target="_blank">TinyTable V3</a> 体积小，功能全~ 还有IE6兼容，呵呵，好物~~</p>
<p><img src="http://www.leigeber.com/wp-content/uploads/2009/11/tinytablev3.jpg"  alt="" /></p>
<p><strong>2010.01.07 新增</strong></p>
<p>9. <a  href="http://www.overset.com/2008/08/30/animated-sortable-data-table-jquery-plugin--jtps/" target="_blank">jTPS</a> 翻页是滚动效果的，速度挺快，IE6也OK~<a  href="http://www.overset.com/2008/08/30/animated-sortable-data-table-jquery-plugin--jtps/" target="_blank"><br/>
</a></p>
<p><img src="http://ajaxian.com/wp-content/uploads/jtps.png"  alt="" /></p>
<p>表格排序有好多好多方法啊，MOO啊PROTO啊YUI啊一堆一堆的，不过我暂时还只能看看Jquery相关，已经眼花了都。。。<br/>
虽然现在试用第一种，不过还是第三个最中意，说不定换换玩~~</p>
<table class="wumii-related-items"  cellspacing="0"  cellpadding="2"  border="0"  width="100%"  style="clear: both;" >
    
    <tr>
        <td><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;" >您可能也喜欢：</font></b></td>
    </tr>
    
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;" >
                    <img border="0"  src="http://static.wumii.com/images/widget/widget_solidPoint.gif" />
                    <a  target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Flight-box-effect-js-collection-jquery-related.html&#038;from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1"  color="#666666"  style="line-height: 1.65em; font-size: 12px !important;" >LIGHT BOX效果JS大集合（Jquery相关）</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;" >
                    <img border="0"  src="http://static.wumii.com/images/widget/widget_solidPoint.gif" />
                    <a  target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-java-script-collection.html&#038;from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1"  color="#666666"  style="line-height: 1.65em; font-size: 12px !important;" >JAVA Script 效果收集</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;" >
                    <img border="0"  src="http://static.wumii.com/images/widget/widget_solidPoint.gif" />
                    <a  target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-wordpress-theme-collection-part2.html&#038;from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1"  color="#666666"  style="line-height: 1.65em; font-size: 12px !important;" >WordPress 主题收集 PART 2</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;" >
                    <img border="0"  src="http://static.wumii.com/images/widget/widget_solidPoint.gif" />
                    <a  target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fwonderful-wordpress-themes-collection.html&#038;from=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html">
                        <font size="-1"  color="#666666"  style="line-height: 1.65em; font-size: 12px !important;" >WordPress 主题收集（2008.12.15更新）</font>
                    </a>
                </td>
            </tr>
    
    <tr>
        <td 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>
	标签：<a href="http://www.iros.me/tag/collection" title="collection" rel="tag">collection</a>, <a href="http://www.iros.me/tag/jquery" title="Jquery" rel="tag">Jquery</a>, <a href="http://www.iros.me/tag/sortable-table" title="Sortable Table" rel="tag">Sortable Table</a>, <a href="http://www.iros.me/tag/%e6%8e%92%e5%ba%8f" title="排序" rel="tag">排序</a>, <a href="http://www.iros.me/tag/%e6%94%b6%e9%9b%86" title="收集" rel="tag">收集</a>, <a href="http://www.iros.me/tag/%e8%a1%a8%e6%a0%bc" title="表格" rel="tag">表格</a><br />
]]></content:encoded>
			<wfw:commentRss>http://www.iros.me/sortable-table-js-collection.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

