使用未排序的变量对表进行排序

时间:2015-04-28 18:38:54

标签: javascript sorting

我有一个表,其数据是从数据库中提取的。所以单个单元格的代码如下所示:

 <td style='border: solid #000000 1px;'>" . $row["charts_retrace"]. "</td>

表格中有8列。大多数列包含数字,一列包含字母(例如:EG,TR,CD,HJ),另一列包含日期(例如:2015年9月14日)。我想要做的就是对它们进行排序,以便数字从低到高,反之亦然,日期从过去到现在,反之亦然,字母按字母顺序排列。

我让我的javascript工作,但排序是错误的。对于正确的代码应该是什么或者我可以用什么代码进行排序的任何想法?

我使用的javascript来自此网站:http://www.allmyscripts.com/Table_Sort/

我的代码的代码片段:

我的PHP代码中的表:

 <table id='my_table' style='border: solid #000000 1px;border-collapse:collapse;'>
<thead>
 <tr>
   <th style='border: solid #000000 1px;padding:15px;'><strong><u>Chart</u></strong></td>

我的头文件中的javascript:

 <script type="text/javascript" src="/gs_sortable.js"></script>
 <script type="text/javascript">
 <!--
 var TSort_Data = new Array ('my_table', '', 'd', 'i', 'i', 'i', 'i', 'i', 'i', 's');
 tsRegister();
 // -->
 </script> 

这是我使用tha tablesorter的新代码(来自呈现的页面):

头部:

&#13;
&#13;
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Charts (Members Only) | MLS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="http://www.mlsinc.net/wp-content/themes/PersonalFinance/lib/css/reset.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://www.mlsinc.net/wp-content/themes/PersonalFinance/lib/css/defaults.css" type="text/css" media="screen, projection" />
<!--[if lt IE 8]><link rel="stylesheet" href="http://www.mlsinc.net/wp-content/themes/PersonalFinance/lib/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<script src="http://www.mlsinc.net/sorttable.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.mlsinc.net/tablesorter-master/jquery-latest.js"></script> 
<script type="text/javascript" src="http://www.mlsinc.net/tablesorter-master/jquery.tablesorter.js"></script> 
<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(( {sortList: [[0,0], [1,0]]} )); 
    } 
); 
</script> 
<link rel="stylesheet" href="http://www.mlsinc.net/wp-content/themes/PersonalFinance/style.css" type="text/css" media="screen, projection" />

	  		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.mlsinc.net\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.1"}};
			!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css'  href='http://www.mlsinc.net/wp-includes/css/dashicons.min.css?ver=4.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://www.mlsinc.net/wp-includes/css/admin-bar.min.css?ver=4.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='siteorigin-panels-front-css'  href='http://www.mlsinc.net/wp-content/plugins/siteorigin-panels/css/front.css?ver=2.1.2' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='http://www.mlsinc.net/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.1.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-lightbox-2.min.css-css'  href='http://www.mlsinc.net/wp-content/plugins/wp-lightbox-2/styles/lightbox.min.css?ver=1.3.4' type='text/css' media='all' />
<link rel='stylesheet' id='quick_chat_style_sheet-css'  href='http://www.mlsinc.net/wp-content/plugins/quick-chat/css/quick-chat.css?ver=4.2.1' type='text/css' media='all' />
<!--[if lt IE 8]>
<link rel='stylesheet' id='quick_chat_ie_style_sheet-css'  href='http://www.mlsinc.net/wp-content/plugins/quick-chat/css/quick-chat-ie.css?ver=4.2.1' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='ws-plugin--s2member-css'  href='http://www.mlsinc.net/wp-content/plugins/s2member/s2member-o.php?ws_plugin__s2member_css=1&#038;qcABC=1&#038;ver=150311-3606627542' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
window.CKEDITOR_BASEPATH = "http://www.mlsinc.net/wp-content/plugins/ckeditor-for-wordpress/ckeditor/";
var ckeditorSettings = { "textarea_id": "comment", "pluginPath": "http:\/\/www.mlsinc.net\/wp-content\/plugins\/ckeditor-for-wordpress\/", "autostart": true, "excerpt_state": false, "qtransEnabled": false, "outputFormat": { "indent": true, "breakBeforeOpen": true, "breakAfterOpen": true, "breakBeforeClose": true, "breakAfterClose": true }, "configuration": { "height": "160px", "skin": "moono", "scayt_autoStartup": false, "entities": true, "entities_greek": true, "entities_latin": true, "toolbar": "WordpressBasic", "templates_files": [ "http:\/\/www.mlsinc.net\/wp-content\/plugins\/ckeditor-for-wordpress\/ckeditor.templates.js" ], "stylesCombo_stylesSet": "wordpress:http:\/\/www.mlsinc.net\/wp-content\/plugins\/ckeditor-for-wordpress\/ckeditor.styles.js", "allowedContent": true, "customConfig": "http:\/\/www.mlsinc.net\/wp-content\/plugins\/ckeditor-for-wordpress\/ckeditor.config.js" }, "externalPlugins": [  ], "additionalButtons": [  ] }
/* ]]> */
</script>		<style type="text/css">
				#content table.cke_editor { margin:0; }
				#content table.cke_editor tr td { padding:0;border:0; }
		</style>
		<script type='text/javascript' src='http://www.mlsinc.net/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.mlsinc.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.mlsinc.net/wp-content/themes/PersonalFinance/lib/js/superfish.js?ver=4.2.1'></script>
<script type='text/javascript' src='http://www.mlsinc.net/wp-content/themes/PersonalFinance/lib/js/jquery.mobilemenu.js?ver=4.2.1'></script>
<script type='text/javascript' src='http://www.mlsinc.net/wp-content/plugins/ckeditor-for-wordpress/ckeditor/ckeditor.js?t=E8PA&#038;ver=4.2.1'></script>
<script type='text/javascript' src='http://www.mlsinc.net/wp-content/plugins/ckeditor-for-wordpress/includes/ckeditor.utils.js?ver=4.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.mlsinc.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.mlsinc.net/wp-includes/wlwmanifest.xml" /> 

<link rel='canonical' href='http://www.mlsinc.net/charts/' />
<link rel='shortlink' href='http://www.mlsinc.net/?p=35' />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-61795914-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="shortcut icon" href="http://www.mlsinc.net/wp-content/uploads/2015/04/favicon.png" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="MLS RSS Feed" href="http://www.mlsinc.net/feed/" />
<link rel="pingback" href="http://www.mlsinc.net/xmlrpc.php" />
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>

</head>
&#13;
&#13;
&#13;

表格:

&#13;
&#13;
<h2>Charts</h2><br><br>
   <table id='myTable' class='tablesorter' style='border: solid #000000 1px;border-collapse:collapse;'>
    <thead>
     <tr>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Chart</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Date</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Retrace</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Start of Swing Trade</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>End of Swing Trade</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Bull flag</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Bear flag</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>EMA Crossover</u></strong></td>
       <th style='border: solid #000000 1px;padding:15px;'><strong><u>Trading Instrument</u></strong></td>
     </tr></thead><tbody><tr><td style='border: solid #000000 1px;'><a href=images/resultspage.jpg><img src=images/resultspage.jpg width='200px'></a></td><td style='border: solid #000000 1px;'>may 15, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/mls_paypal.gif><img src=images/mls_paypal.gif width='200px'></a></td><td style='border: solid #000000 1px;'>jan 14, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>EQ</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/intraday-new-1-1024x479.png><img src=images/intraday-new-1-1024x479.png width='200px'></a></td><td style='border: solid #000000 1px;'>dec 14, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>EQ</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/signature.jpg><img src=images/signature.jpg width='200px'></a></td><td style='border: solid #000000 1px;'>dec 14, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>EQ</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/intraday-new-1-1024x479.png><img src=images/intraday-new-1-1024x479.png width='200px'></a></td><td style='border: solid #000000 1px;'>dec 14, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>EQ</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/intraday-new-1-1024x479.png><img src=images/intraday-new-1-1024x479.png width='200px'></a></td><td style='border: solid #000000 1px;'>may 14, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/intraday-new-1-1024x479.png><img src=images/intraday-new-1-1024x479.png width='200px'></a></td><td style='border: solid #000000 1px;'>may 1, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=><img src= width='200px'></a></td><td style='border: solid #000000 1px;'>may 1, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=><img src= width='200px'></a></td><td style='border: solid #000000 1px;'>may 1, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/resultspage.jpg><img src=images/resultspage.jpg width='200px'></a></td><td style='border: solid #000000 1px;'>may 15, 2015</td><td style='border: solid #000000 1px;'>232</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>322</td><td style='border: solid #000000 1px;'>3434</td><td style='border: solid #000000 1px;'>ES</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/logo_large.png><img src=images/logo_large.png width='200px'></a></td><td style='border: solid #000000 1px;'>dec 1, 2020</td><td style='border: solid #000000 1px;'>34</td><td style='border: solid #000000 1px;'>43</td><td style='border: solid #000000 1px;'>324</td><td style='border: solid #000000 1px;'>543</td><td style='border: solid #000000 1px;'>234</td><td style='border: solid #000000 1px;'>343</td><td style='border: solid #000000 1px;'>WS</td></tr></tbody><tbody><tr><td style='border: solid #000000 1px;'><a href=images/next.gif><img src=images/next.gif width='200px'></a></td><td style='border: solid #000000 1px;'>feb 6, 2089</td><td style='border: solid #000000 1px;'>34</td><td style='border: solid #000000 1px;'>34</td><td style='border: solid #000000 1px;'>43</td><td style='border: solid #000000 1px;'>3423</td><td style='border: solid #000000 1px;'>4</td><td style='border: solid #000000 1px;'>3</td><td style='border: solid #000000 1px;'>ET</td></tr></tbody></table> 
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

似乎问题出在您正在使用的第三方表格排序脚本中。您可能错误地使用它,这可能是因为脚本有问题,因为文档错误,或者您误解了如何使用它。我没有使用过那个脚本,你不太可能在SO上获得对第三方脚本的支持,除非它是众所周知的。

我快速查看了您链接到的Table_Sort文档,并且您似乎正在以正确的方式使用它。仔细检查您的列类型是否与阵列中的列类型匹配。由于您还没有提供您正在排序的数据的示例,因此您的问题不清楚您是使用正确的参数,也不清楚哪些列未正确排序。您的日期可能是格式不正确,因为您使用的脚本似乎不提供本地化或日期格式选项,因此可能无法正确读取它。

如果您希望获得有关使用此脚本的更多帮助,请提供该表的示例,包括哪些列的行为不应该如此!如果没有特别的理由使用这个脚本,为什么不使用一个更常见的,经过试验和测试的,如Christian Bach的TableSorter?它是免费的,高度可定制的,更易于使用,而且更常见的可能是更少的错误和更多的支持。

编辑新的TableSorter问题

我查看了您的代码,您的案例中的问题只是无效的HTML。两个简单的更改将使其正常工作:

    您在表格标题中的
  • 意外地使用<th>关闭了<\td>代码。将所有这些标记更改为<\th>

  • 在您的表格中
  • ,您已在每行之间放置</tbody><tbody><tr>...</tr>表示HTML行,<tbody>...<\tbody>表示包含所有正文行。在</tbody><tbody>上对空字符串执行替换将清除这一点。

脚本可能一直在工作,但只有一行要排序(最上面的一行)所以看起来它什么也没做!这可能是您使用的上一个脚本的问题,因此如果您愿意,可以恢复使用它,但我发现TableSorter非常出色。希望这会有所帮助并让您顺利前进!祝好运。