複数のJSONテーブルを1つのビューで動的に表示する

次のような状況があります。複数のJSONデータテーブルを表示するビューがあります。現時点では、@foreachのHTMLマークアップを生成し、JSONデータテーブルごとに別々のjscript関数を使用します。複数のJSONテーブルを1つのビューで動的に表示する

結果が動的に完全なビューを生成するために、次のようになります。

<div class="content animate-panel"> 
@{ 
    foreach (var fc in Model) 
    { 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="hpanel"> 
       <div class="panel-heading"> 
        <div class="panel-tools"> 
         <a class="showhide"><i class="fa fa-chevron-up"></i></a> 
         <a class="closebox"><i class="fa fa-times"></i></a> 
        </div> 
        Auszahlungen @fc.Name 
       </div> 
       <div class="panel-body"> 
        <div class="table-responsive"> 
         <table id="[email protected]_ID" class="display table table-bordered" width="100%"> 
          <thead> 
           <tr> 
            <th>Datum</th> 
            <th align="right">Umsatz</th> 
            <th>Anteil 's Fachl</th> 
            <th>Rabatt&nbsp;<span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th> 
            <th>ausbezahlter Betrag</th> 
            <th>Details/Drucken</th> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    } 
} 
</div>

スクリプト：

$(function() { 
     // JSON data 
     var chartDataUrl_1 = '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "1"})'; 

     // Tabelle für den Standort Wien 
     $('#FachlID_1').dataTable({ 
      language: { 
       "zeroRecords": "Keine Daten gefunden", 
       "lengthMenu": "Zeige _MENU_ Datensätze", 
       "search": "Suche:", 
       "paginate": { 
        "first": "Anfang", 
        "last": "Ende", 
        "next": "Weiter", 
        "previous": "Zurück" 
       }, 
      }, 
      "ajax": chartDataUrl_1, 
      dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp", 
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
      buttons: [ 
       //{ extend: 'copy', className: 'btn-sm' }, 
       //{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' }, 
       //{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' }, 
       { extend: 'print', className: 'btn-sm' } 
      ] 
     });

誰も私は、パラメータ

{ fid = "1" }

が動的に対応し得るのを助けることができます〜

foreachの

@fc.Shop_ID

です。

出典

2017-10-21 Chris

問題を解決しましたか？あなたが答えをつかむことはできますか？ – GGO

ここには~~の2つの~~があります。第三1（TBH最良のもの）についてShyjuの答え@見

最も簡単なものは、ちょうどそう

foreach (var fc in Model) 
{ 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="hpanel"> 
       <div class="panel-heading"> 
        <div class="panel-tools"> 
         <a class="showhide"><i class="fa fa-chevron-up"></i></a> 
         <a class="closebox"><i class="fa fa-times"></i></a> 
        </div> 
        Auszahlungen @fc.Name 
       </div> 
       <div class="panel-body"> 
        <div class="table-responsive"> 
         <table id="[email protected]_ID" class="display table table-bordered" width="100%"> 
          <thead> 
           <tr> 
            <th>Datum</th> 
            <th align="right">Umsatz</th> 
            <th>Anteil 's Fachl</th> 
            <th>Rabatt&nbsp;<span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th> 
            <th>ausbezahlter Betrag</th> 
            <th>Details/Drucken</th> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    $(function() 
    { 

    // JSON data 
    var chartDataUrl_1 = '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "@fc.Shop_ID"})'; 

    // Tabelle für den Standort Wien 
    $('#[email protected]_ID').dataTable(
    { 
     language: 
     { 
      "zeroRecords": "Keine Daten gefunden", 
      "lengthMenu": "Zeige _MENU_ Datensätze", 
      "search": "Suche:", 
      "paginate": 
      { 
       "first": "Anfang", 
       "last": "Ende", 
       "next": "Weiter", 
       "previous": "Zurück" 
      }, 
     }, 
     "ajax": chartDataUrl_1, 
     dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp", 
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
     buttons: 
     [ 
      //{ extend: 'copy', className: 'btn-sm' }, 
      //{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' }, 
      //{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' }, 
      { extend: 'print', className: 'btn-sm' } 
     ] 
    }); 
}

のようなループ内であなたのJavascriptを置くことであろうが、私はこれがあるとは思いませんJavaScriptコードが重複してしまうため、最適なソリューションです。

代わりに、あなたはあなたがループ内にテーブルを作成しているので、

foreach (var fc in Model) 
{ 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="hpanel"> 
       <div class="panel-heading"> 
        <div class="panel-tools"> 
         <a class="showhide"><i class="fa fa-chevron-up"></i></a> 
         <a class="closebox"><i class="fa fa-times"></i></a> 
        </div> 
        Auszahlungen @fc.Name 
       </div> 
       <div class="panel-body"> 
        <div class="table-responsive"> 
         <table id="[email protected]_ID" class="display table table-bordered" width="100%"> 
          <thead> 
           <tr> 
            <th>Datum</th> 
            <th align="right">Umsatz</th> 
            <th>Anteil 's Fachl</th> 
            <th>Rabatt&nbsp;<span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th> 
            <th>ausbezahlter Betrag</th> 
            <th>Details/Drucken</th> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    $(function() 
    { 
     callAjax('#[email protected]_ID', '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "@fc.Shop_ID"})'); 
    }); 

} 

    function callAjax(id, url) 
    { 
     // JSON data 
     var chartDataUrl_1 = url; 

     // Tabelle für den Standort Wien 
     $(id).dataTable(
     { 
      language: 
      { 
       "zeroRecords": "Keine Daten gefunden", 
       "lengthMenu": "Zeige _MENU_ Datensätze", 
       "search": "Suche:", 
       "paginate": 
       { 
        "first": "Anfang", 
        "last": "Ende", 
        "next": "Weiter", 
        "previous": "Zurück" 
       }, 
      }, 
      "ajax": chartDataUrl_1, 
      dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp", 
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
      buttons: 
      [ 
       //{ extend: 'copy', className: 'btn-sm' }, 
       //{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' }, 
       //{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' }, 
       { extend: 'print', className: 'btn-sm' } 
      ] 
     } 
    }

出典

2017-10-21 15:59:38 Wndrr

のようなJavaScriptのfunctingを使用する場合があります。 jQueryセレクタを使用してそれらのループを徹底的にループし、必要な情報を得ることができます。データ属性にId値を設定できます。

jQueryのセレクタを簡単にするために、私は、今すぐ文書の準備ができてあなたのテーブルに

foreach (var fc in Model) 
{ 
    <table id="[email protected]_ID" data-id="@fc.Shop_ID" class="my-json-tbl table" > 
    <!-- Your other code for headers--> 
    </table> 
}

をcssクラスを追加私の-JSON-TBLクラスですべてのテーブルを取得し、データIDを読んでいました値。

$(function() { 

    var baseUrl = '@Url.Action("tableJsonDataAbrechnung","FachlViews")'; 
    $(".my-json-tbl").each(function(i, item) { 
     var id = $(item).data("id"); 

     var url = baseUrl + '?fid=' + id; 
     console.log(url); 
     //do something with the url, perhaps call data table here on $(item) 
    }); 
})

もう1つの方法は、JavaScriptの内部にC＃ループ式を追加することです。かみそりがコードを実行すると、Modelコレクション内の各項目のJavaScriptが生成されます。

$(function() { 

    @foreach (var item in Model) 
    { 
     <text> 
      var url = '@Url.Action("tableJsonDataAbrechnung","FachlViews", 
                  new {fid=item.Shop_ID})'; 
      console.log(url); 
      //do something with this. 
     </text> 

    } 
})

出典

2017-10-21 16:00:33 Shyju

複数のJSONテーブルを1つのビューで動的に表示する

答えて

関連する問題