Question

这是我的html文件：

 <html>
<head>
      <script type="text/javascript" src="script.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript" src="http://tablesorter.ru/jquery.tablesorter.min.js"></script>
      <script type="text/javascript" src="http://tablesorter.ru/addons/pager/jquery.tablesorter.pager.js"></script>
      <script type="text/javascript">
        $(document).ready(function() 
        { 
        $("#excelDataTable1").tablesorter(); 
        } 
        ); 
        </script>

</head>
<body onLoad="main()">
    <table id="excelDataTable" border="1" class="tablesorter">
    </table>

</body>
</html>

这是script.js

var myList=[{"Идентификатор" : "1", "Название" : "Iphone","Стоимость":"500","Количество":"5"},
        {"Идентификатор" : "2", "Название" : "XBOX","Стоимость":"300","Количество":"7"},
        {"Идентификатор" : "3", "Название" : "XBOX","Стоимость":"400","Количество":"7"}];
function buildHtmlTable() {
 var columns = addAllColumnHeaders(myList);

 for (var i = 0 ; i < myList.length ; i++) {
     var row$ = $('<tr/>');
     for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
         var cellValue = myList[i][columns[colIndex]];

         if (cellValue == null) { cellValue = ""; }

         row$.append($('<td/>').html(cellValue));
     }
    $("#excelDataTable").append(row$);
 }

    $("#excelDataTable").append($('<tbody/>'));}
 function addAllColumnHeaders(myList)
{
 var columnSet = [];
 var headerTr$ = $('<tr/>');

     var rowHash = myList[0];
     for (var key in rowHash) {

         if ($.inArray(key, columnSet) == -1){
             headerTr$.append($('<th/>').html(key));
             columnSet.push(key);
         }
     }
 $("#excelDataTable").append($('<thead/>').html(headerTr$));
 alert(columnSet);
 return columnSet;}
  function main(){
buildHtmlTable();}

我使用了jquery的tablesort来对我的excelDataTable进行排序。当我使用生成的表代码并粘贴到html时它工作正常，但是当我使用动态表时它不起作用。

Answer 1

根据我上面的评论，你可以试试这个：

$(document).ready(function() { 
  $.when( main() ).done( function() {
    $("#excelDataTable1").tablesorter(); 
  });
});

此处when方法的相关信息：http://api.jquery.com/jQuery.when/

基本上，这可以确保您的main()函数在执行tablesorter插件之前已经完成。

Javascript tablesort不适用于动态表

1 个答案: