html - show results of JavaScript after function complete -
situation
script below, table reformat (changed). however, due large amount of data values, there few seconds can see squashed table.
question
trying find may function need add show/display table, after has run javascript or ready. jsfiddle fiddle has small amount of data, doesn't show above issue.
inside html
<head> <script type="text/javascript" src="settable.js"></script> </head> javascript
*actual amount of data consists of 800~1000 rows
$(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()); (var = 0; < tds.length; i++) { tds.eq(i).css('width', ths.eq(i).outerwidth()); } tbody.width('auto'); } }); everyone's comment , appreciated.
does http://jsfiddle.net/b42vn2nh/97/ demonstrate your issue? if http://jsfiddle.net/b42vn2nh/99/ solve problem?
in first link have added 3 second delay between render , javascript running using
$(document).ready(window.settimeout(dostuff, 3000)); in second link have added css rules
#table-body { width:100%; } #table-body thead { height:34px; line-height:32px; background-color:#1ba7f5; color:#fff; width: 100%; } there still flash once javascript runs have not replicated styles javascript adding.
so in short javascript not running until content rendered, in case table huge take time. ensure styles in place right start including them in css file in head of html document.
Comments
Post a Comment