Question

需要使用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>

如何设置数据表排序列??

Answer 1

请查看此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" }
        ]   

    });
});

jquery排序表列

1 个答案: