通过单击列标题进行表排序

我遇到了通过单击列名称排序表中数据的问题。我为此尝试了很多解决方案。但问题是，当我使用javascript insertRow（）方法向表中添加行时，它似乎工作正常。插入新行后，当我点击任何列时，旧数据只会被排序，并且通过javascript插入的新行正在消失。这里是代码：您可以找到gs_sortable.js文件在这个环节http://www.allmyscripts.com/Table_Sort/通过单击列标题进行表排序

<script type="text/javascript"> 
     var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');    
    </script> 
    <title>JSP Page</title> 
</head> 
<body><h3 align="center" > 
    </h3><table class="table-autosort" width="100%"> <table id="my_table"> 
      <thead> 
       <tr> 
        <th width="25%">Product</th> 
        <th width="25%">Date</th> 
        <th width="25%">Price per unit</th> 
        <th width="25%">Units sold</th> 
       </tr> 
      </thead> 
      <tr> 
       <td width="25%" >Item A</td> 
       <td width="25%">14/5/2012</td> 
       <td width="25%">$28</td> 
       <td width="25%"> 1</td> 
      </tr> 
      <tr> 
       <td width="25%"> Item B</td> 
       <td width="25%">14/5/2012</td> 
       <td width="25%">$35</td> 
       <td width="25%">1</td> 

      </tr> 
      <tr> 
       <td width="25%">Item A</td> 
       <td width="25%">13/5/2012</td> 
       <td width="25%">$25.15</td> 
       <td width="25%">20</td> 
      </tr> 
      <tr> 
       <td width="25%">Item C</td> 
       <td width="25%">15/5/2012</td> 
       <td width="25%">$20</td> 
       <td width="25%">100</td> 
      </tr> 
     </table> 
     <button type="button" onclick="displayResult()">Insert new row</button> 
    </table> 

</body>

我想新行是在排序列表当我点击列标题。

谢谢

来源

2013-10-15 user1934199

你可以使用[Datatables jQuery插件]（http://datatables.net/）为此目的？ –

这里是一个工作拨弄解决http://jsfiddle.net/GbGx5/4/

进口件事就是重新注册tsort对表中的数据你叫的insertRow后，否则里面tsort的高速缓存中的数据将只包含旧表格数据。

为此调用以下方法（如文档中推荐下使用脚本动态加载表http://www.allmyscripts.com/Table_Sort/#example）

// Make sure we refresh the TSort_Data Array! 
TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i'); 
tsRegister(); 
tsSetTable('my_table'); 
tsInit();

的例子的完整JavaScript是如下...

var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');    

function insertNewRow() { 
    var table=document.getElementById("my_table"), 
     newRowIndex = table.getElementsByTagName('tr').length, 
     row=table.insertRow(newRowIndex), 
     cell1=row.insertCell(0), 
     cell2=row.insertCell(1), 
     cell3=row.insertCell(2),   
     cell4=row.insertCell(3); 

    cell1.innerHTML = "New Item"; 
    cell2.innerHTML = "15/10/2013"; 
    cell3.innerHTML = "$5"; 
    cell4.innerHTML = 51;  

    // Make sure we refresh the TSort_Data Array! 
    TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i'); 
    tsRegister(); 
    tsSetTable('my_table'); 
    tsInit();  
}

来源

2013-10-15 13:33:31

非常感谢。它效果很好！ – user1934199

通过单击列标题进行表排序

回答

相关问题