显示功能完成后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的结果

回答

相关问题