顯示功能完成後JavaScript的結果

情況
下面的腳本更改了表格佈局。但是，由於數據量很大，我可以在幾秒鐘內看到壓扁的桌子。顯示功能完成後JavaScript的結果

問題
如何在運行JavaScript或準備就緒後顯示錶。 jsfiddle這個小提琴有少量的數據，所以它不顯示上述問題。

內HTML

<head> 
<script type="text/javascript" src="settable.js"></script> 
</head>

的JavaScript
*數據的實際量由800〜1000行

$(document).ready(function() { 

    var tbody = "#table-body"; 
    var row = $("#table-body tbody>tr"); 

    $("<div>", { 
     class: "tablewrapper" 
    }).insertBefore(tbody); 
    $("<table>", { 
     class: "header" 
    }).appendTo($("<div>", { 
     class: "headerwrapper" 
    }).appendTo("div.tablewrapper")); 
    $(tbody).appendTo($("<div>", { 
     class: "bodywrapper" 
    }).appendTo("div.tablewrapper")); 
    $(tbody + ">thead").clone().val("").appendTo("table.header"); 
    $("table.header>tr").removeClass("header_hidden"); 
    $(tbody).find("thead th").empty(); 
    $(tbody).find("tbody td:nth-child(3)").addClass("lefty"); 
    $("<input>", { 
     type: "text" 
    }).attr("id", "search-criteria").appendTo($("<div>", { 
     class: "s_box" 
    }).insertAfter("div.bodywrapper")); 
    $("<div>").attr("id", "count").appendTo("div.s_box"); 

    resizeTable(); 
    //var bodyTd = $("#table-body tr td"); 

    $(window).resize(resizeTable); 

    //search function 
    $("#search-criteria").on("keyup", function() { 
     var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) { 
      return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0); 
     }).toLowerCase(); 
     //var row = $("#table-body tbody>tr"); 

     if (keyword !== "") { 
      row.each(function() { 

       var td_word = $(this).text().toLowerCase(); 
       //shorthand if function 
       $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide'](); 
      }); 
      var srowCount = row.filter(":visible").length; 
      document.getElementById('count').innerHTML = srowCount; 
      rowCount(); 
     } else { 
      $("tr.s_empty").remove(); 
      row.show(); 
      document.getElementById('count').innerHTML = row.length; 
     } 

     resizeTable(); 
    }); 

// var row = "#table-body tbody>tr"; 
    var srowCount = row.filter(":visible").length; 
    document.getElementById('count').innerHTML = srowCount; 

    function rowCount(srowCount) { 
     if (srowCount === 0) { 
      if (!row.last().hasClass('s_empty')) { 
       $("#table-body tbody").last().append('<tr class="s_empty"><td colspan="5" style="text-align:center">Search not found</td></tr>'); 
      } 
      $("tr.s_empty").show(); 
     } else { 
      $("tr.s_empty").remove(); 
     } 
    } 

    function resizeTable() { 
     //width adjustments 
     $("#search-criteria").width($("div.headerwrapper").width() - 30); 

     var tbody = $('#table-body'); 
     var thead = $('table.header'); 
     var tds = tbody.find('thead th'); 
     var ths = thead.find('th'); 
     tbody.width('100%'); 
     tds.css('width', ''); 
     thead.width(tbody.width()); 
     for (var i = 0; i < tds.length; i++) { 
      tds.eq(i).css('width', ths.eq(i).outerWidth()); 
     } 
     tbody.width('auto'); 
    } 
});

大家的意見和幫助表示讚賞。

來源

2015-04-01 Maki

這是一個JSON數據嗎？你允許使用一些插件嗎？像數據表？ – 2015-04-01 01:36:42

我不認爲這是一個JSON。只需要純粹的HTML表格和帶有Jquery庫的JavaScript。 //如果我編寫插件，是的，我可以使用它。但是，如果你是在暗示外部的話。感謝數據表插件建議。 – Maki 2015-04-01 01:39:41

是否http://jsfiddle.net/b42vn2nh/97/證明你的問題？如果是的話http://jsfiddle.net/b42vn2nh/99/解決你的問題？在第一個環節我都加渲染和使用

$(document).ready(window.setTimeout(dostuff, 3000));

在第二個鏈接我加入的CSS規則

#table-body { 
    width:100%; 
} 

#table-body thead { 
    height:34px; 
    line-height:32px; 
    background-color:#1BA7F5; 
    color:#FFF; 
    width: 100%; 
}

還有一個你的JavaScript運行之間有3秒延時

閃光燈一旦你的JavaScript運行，因爲我沒有複製你的JavaScript添加的所有樣式。

因此，簡而言之，在所有內容都呈現之前，您的JavaScript並未運行，在表格很大的情況下，這將需要一些時間。因此，請確保您的樣式從一開始就包含在HTML文檔的head的css文件中。

來源

2015-04-01 03:59:01

謝謝大衛。雖然我在考慮除setTimeout外還有其他簡單的方法。但是，這也有效，並且請注意你提到了我的CSS訂購。謝謝。 – Maki 2015-04-01 04:51:27

您可以將新表添加到尚未附加到DOM或當前style="display:none"的div。無論哪種方式，用戶將無法看到該表格，直到完成添加行爲止。

var div = $("<div>", {class: "tablewrapper"}); 
var table = $("<table>").appendTo(div); 
// Add all rows to table 
... 
div.appendBefore(tbody)

或

var div= $("<div>", {class: "tablewrapper", style: "display:none"}); 
... 
div.css('display', 'block');

來源

2015-04-01 01:43:21

我不太明白你在說什麼。 – Maki 2015-04-01 01:53:26

我可能在這裏得到了錯誤的結局。我想你在哪裏通過AJAX調用獲取數據，並在接收到輸入後添加到DOM中。看着你的代碼，延遲可能只是等待表格在點播之前呈現。我已經爲您的問題添加了不同的假設。 – 2015-04-01 03:59:38

顯示功能完成後JavaScript的結果

回答

相關問題