ajaxとjqueryの作業を完了した後にhtmlを表示

以下のコードは私が説明したものです。だから完全なものではありません。私は私の質問を説明するのに十分なだけ書いた。ajaxとjqueryの作業を完了した後にhtmlを表示

HTML負荷 - >コールAJAX - > JSON（応答） - Iは、応答データとAJAX、更新ページを使用してjQueryを使ってページ内のいくつかの要素を追加するたび> jQueryの

によってJSONでテーブルの行を追加し、それjqueryでスクリーンに1つずつ非常に素早く追加するプロセスを示します。

1. jQueryでforループのすべての要素を追加すると、すべての表を一度に表示できますか？

2.私のコード例では、文書が準備完了した後で、初めて$(document).ready()でajaxを呼び出します。すべてのhtmlページがロードされた後にajaxが呼び出され、htmlの一部がajaxレスポンスで更新されるため、テーブルにデータを表示するのがかなり遅いようです。それはajaxを使用する間違った方法ですか？

<html> 

<body> 
    I have to html syntax to show data list. 
    <table id="example"> 
     <thread> 
      <th>order</th> 
      <th>title</th> 
     </thread> 
     <tbody> 
     </tbody> 
    </table> 
    <button onclick="javascript:loadajaxfunction(parameter to update)">Update</button> 
</body> 

<script> 
    $(document).ready(function() { 
     loadajaxfunction(); 
    }); 

    loadajaxfunction = function(parameter to update) { 
    $.ajax({ 
     url: 
     type: 
     data: 
     success: function(json){ 
      $tbody = $("#example").find('tbody') 
      $row = $('<tr>'); 

      $.each(json.objects, function(key, value){ 
       $col = $('td>'); 
       $col.text(value); 
       $row.append($col); 
      } 
      $tbody.append($row); 
     } 
    }); 
</script> 

</html>

出典

2016-12-27 Jayground

それは '$のtbody'上の' .each（） 'ループ内で1行1を追加し、あなたが何をしているかであるためです。 'html（$ myVarContainingCustomStringHoldingHtmlForNewTableData）'を使用して '＃example'のhtmlを新しいテーブルのデータに設定してください。 –

追加される個々の要素を確認するのは苦労します。あなたは1つを追加するだけです。テーブル全体を表示するには、CSSで隠すことができ、コールバック内のテーブルを表示することができます – charlietfl

です。ありがとうございました。私は '$ col = $（ '）のようなコードを書いた。 $ href = $（ ''）; $ href.addClass（ "カスタムクラス"）; $ href.attr（ "hre"、 "url"）; $ href.text（ "値を入れたい"）; $ col.append（$ href）; $ row.append（$ addcol）; ' 'var example ="value i want to put "私は後で編集して管理するのが面倒だと思っていました。どう思いますか？ – Jayground

あなたは最初のテーブルを隠し、その後、私たちは応答を持っていたときにそれをすべて表示することができます。 JSで

<table id="example" style="visibility: hidden"> <!-- Change here --> 
    <thread> 
     <th>order</th> 
     <th>title</th> 
    </thread> 
    <tbody> 
    </tbody> 
</table>

：このよう

loadajaxfunction = function(parameter to update) { 
$.ajax({ 
    url: 
    type: 
    data: 
    success: function(json){ 
     $tbody = $("#example").find('tbody') 
     $row = $('<tr>'); 

     $.each(json.objects, function(key, value){ 
      $col = $('td>'); 
      $col.text(value); 
      $row.append($col); 
     } 
     $tbody.append($row); 
     $("#example").css('visibility', 'visible'); // <--- And here 
    } 
});

あなたがアヤックスを使用している方法は何も問題はありません。テーブルをより速くレンダリングしたい場合は、サーバーから直接HTMLに戻してみてください。

クライアント側で行う必要がある場合は、テーブル全体のHTMLを最初に構築してから<table>に置き換えてください。行に行を追加することであまりDOMにアクセスしないでください。

loadajaxfunction = function(parameter to update) { 
$.ajax({ 
    url: 
    type: 
    data: 
    success: function(json){ 
     $tbody = $("#example").find('tbody') 
     $row = $('<tr>'); 
     // Build html for cols 
     var cols = ''; 
     $.each(json.objects, function(key, value){ 
      cols += '<td>' + value + '</td>' 
     } 
     // Append it in all by once 
     $row.html(cols); 
     $tbody.append($row); 
     $("#example").css('visibility', 'visible'); 
    } 
});

出典

2016-12-27 01:56:11 TrungDQ

表を表示するには、表示属性を設定する必要があります。ありがとうございました。だから、あなたは 'append（）'をできるだけ少なく使う方が良いと言っていますか？パフォーマンスの問題が原因ですか？あなたはappend（）を少し使ってみるべき理由を説明してもらえますか？ – Jayground

DOMを操作する（ 'append'）のは、文字列を連結するよりも高価です。だから、それはパフォーマンス上の問題です。ちょうどあなたのために有益かもしれないこの記事をGoogleで見つけました：http://moduscreate.com/efficient-dom-and-css/ – TrungDQ

私はあなたが置くリンクを読んでいます。有益なリンクをご利用いただき、ありがとうございます。それは私のために役立った。 append（）を少なくしてパフォーマンスを向上させるためにコードを修正する必要があります。 – Jayground

ajaxとjqueryの作業を完了した後にhtmlを表示

答えて

関連する問題