Question

尝试通过复制行而不是整个表来对表进行排序。单击列标题时，列的数据必须进行比较和排序，行重新排列，但我不知道我哪里出错。这是我的代码。

 <!DOCTYPE html>
            <html lang="en">
            <head>
    	    <title>Table Sort</title>
    	    <meta charset="utf-8">
    	    <meta name="viewport" content="width=device-width,initial-scale=1">
    	    <script        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script>
    	  <script type="text/javascript">
    		 $(document).ready(function() {
                    $('th').click(function() {
    				    var ColNo = parseInt($(this).index());
    					var rows= $('tbody').children('tr');
    					var TotRows = parseInt(rows.length);
    					for (var i = TotRows-1; i >= 0; i--) {
    						for (var j = TotRows-1; j > 0; j--) {
    						       var jint = parseInt(j);
    							  var frstval = parseInt(rows[jint].getElementsByTagName("td")[ColNo].innerHTML);
    							  var scndval = parseInt(rows[jint - 1].getElementsByTagName("td")[ColNo].innerHTML);
    							if (frstval < scndval) { 
    							     var a = frstval < scndval;
    								 alert(a);
    							     var sourceRow = $('tr').eq(jint);
    								 alert(sourceRow);
    								 var targetRow = $('tr').eq(jint-1);
    								 targetRow.after(sourceRow.clone());
    								 sourceRow.replaceWith(targetRow);
    							}
    						}
    					}
    					
                    });
                });
        </script>
    </head>
    <body>
     <table>
    	<thead>
    		 <tr>
    			 <th>Employee Id</th>
    			 <th>Name</th>
    			 <th>Age</th>
    		 </tr>
    	</thead>
    	<tbody>
    		 <tr>
    			 <td>11</td>
    			 <td>AAA</td>
    			 <td>28</td>
    		 </tr>
    		 <tr>
    			 <td>22</td>
    			 <td>BBB</td>
    			 <td>29</td>
    		 </tr>
    		 <tr>
    			 <td>33</td>
    			 <td>CCC</td>
    			 <td>21</td>
    		 </tr>
    		 <tr>
    			 <td>44</td>
    			 <td>DDD</td>
    			 <td>24</td>
    		   </tr>
    	   </tbody>
         </table>
        </body>
        </html>

Answer 1

在数据表排序中，此链接可能对您有所帮助。请查看以下链接https://datatables.net/examples/basic_init/table_sorting.html。希望这会对你有所帮助。

Answer 2

如果您使用dhtmlXgrid更好......它更容易实现，您可以创建要填充表格的整个数据集的JSON对象。然后，只需将JSON对象解析为dhtmlXgrid。使用dhtmlXgrid，排序，列大小，列拖放，行拖放等，所有这些活动都可以自动完成。

使用jQuery单击每列的标题对表进行排序，而不复制整个表

2 个答案: