2016-08-19 163 views
3

需要使用jquery對錶進行排序。
嘗試僅將排序功能添加到已存在的表中,如下所示。但是,不工作,需要幫​​助。jquery排序表列

mytest.js

$(document).ready(function() { 
    $('#table1').dataTable({ 
    "bFilter": false, 
    "bLengthChange": false, 

    "aoColumns": [ { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' }, 
        { "sType": 'num-html' } 
    ] 
    }); 
}); 

JSP文件

.... 
<link rel="stylesheet" href="<%=cssPath %>sort_table.css"> 
<script src="<%=jsPath%>mytest.js"></script> 
<script src="<%=jsPath%>jquery.dataTables.js"></script> 
<script> 

jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) { 
    var x = a.replace(/<.*?>/g, ""); 
    var y = b.replace(/<.*?>/g, ""); 
    x = parseFloat(x); 
    y = parseFloat(y); 
    return ((x < y || isNaN(y)) ? -1 : ((x > y || isNaN(x)) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) { 
    var x = a.replace(/<.*?>/g, ""); 
    var y = b.replace(/<.*?>/g, ""); 
    x = parseFloat(x); 
    y = parseFloat(y); 
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y)) ? -1 : 0)); 
}; 

</script> 

<html> 
<body> 
    ....... 
    <table class="dataTable" id="table1" width="100%"> 
     <tr> 
     <td> 
      <table class="table" width="100%"> 
       <thead> 
        <td>column1</td> 
        <td>column2</td> 
     ... 
       </thead> 
      </table> 
      <div> //scrollable div 
       <table class="table" width="100%"> 
       <tr> 
        <td>column1</td> 
        <td>column2</td> 
     ... 
       </tr> 
       </table> 
      </div> 
     </td> 
     </tr> 
    </table> 
    </body> 
    </html> 

如何設置數據表中的排序列?

+0

需要幫助的這個請 – user3761541

回答

0

請看看這個Example

- 代碼已經改變了排序列列表

$(document).ready(function() { 
    $('#example').DataTable({ 
     data: dataSet, 
     "bFilter": false, 
     "bLengthChange": false, 
     "aoColumns": [ { title: "Name" }, 
      { title: "Position" }, 
      { title: "Office" }, 
      { title: "Extn." }, 
      { title: "Start date" }, 
      { title: "Salary" } 
     ] 

    }); 
});