Footable内のリンクを使用しても機能しませんか？

Question

私は単純なajax呼び出しでデータを受け取ったページでFooTableを使っています。ページ上の私のテーブルには、次のとおりです。

<table id="orderDashboard" class="table table-bordered table-hover footable margin-top-20" data-type="html" data-paging="true" data-filtering="true" data-sorting="true" data-editing="false" data-page-size="50"> 


      </table> 

それを実行するためのJavaScriptコードは次のとおりです。データが移入されたときに

$(window).load(function() { 

    var myLink = "<a href='#' onclick='editRepairOrder();'>"; 

    //$editorTitle = $('#editor-title'), 
    ft = FooTable.init('#orderDashboard', { 
     columns: [ 
      {"name":"orderDate","title":"Order Date"}, 
      {"name":"customer","title":"Customer"}, 
      {"name":"numberOfParts","title":"Number of Parts"}, 
      {"name":"OrderNum","title":"R2 Order #"}, 
      {"name":"orderStatus","title":"Order Status"}, 
      {"name":"lastUpdate","title":"Last Change Date"}, 
      {"name":"id","title":"Action","breakpoints":"xs sm","type":"HTML","style":{"width":40,"maxWidth":40}} 
     ], 
     rows: [ 
      {"orderDate":"","customer":"","numberOfParts":"","orderNum":"","orderStatus":"","lastUpdate":"","id":""} 
     ] 
    }); 

    $.ajax({ 
     type: "GET", url: "./getRepairsDashboard", dataType: "json", 
     success:function(data){ 

      $.each(data, function(index, item){ 
       var row = create_table_row(item); 
       $('table tbody').append(row).trigger('footable_redraw'); 
      }); 

      $('table').footable(); 

      $('.footable').trigger('footable_redraw'); //force a redraw 

     }, 
     error: function (req, status, err) { 
      console.log('add items to table error: ', status, err); 
     } 
    }); 

    $('<a href="#"><span class="play"></span><span class="trackName">Track Name</span></a>') 

    function create_table_row (item) { 
     var row = $('<tr><td>' + item.orderDate + '</td><td>' + item.customer + '</td>' + 
       '<td>' + item.numberOfParts + '</td><td>' + item.orderNum + '</td><td>' + item.orderStatus + '' + 
       '</td><td>' + item.lastUpdate + '</td><td><a href=' + item.id +'>' + item.id + '</a></td></tr>'); 
     return row; 
    } 

    $('table').footable();  
}); 

しかし、FooTableは、HTML タグを除去します。 JavaScriptを介して、列と行を設定することも、のような挿入されたデータの上に空白行を残します：screenshot

場合、私のセットアップテーブル内のHTMLを経由して、私のコラムは

<table id="orderDashboard" class="table table-bordered table-hover footable margin-top-20" data-type="html" data-paging="true" data-filtering="true" data-sorting="true" data-editing="false" data-page-size="50"> 
       <thead> 
       <tr> 
        <th data-toggle="true"> 
         Order Date 
        </th> 
        <th data-sort-ignore="true"> 
         Customer 
        </th>       
       </tr> 
       </thead> 

      </table> 

それから私は、「結果なし」を取得していません挿入されたデータの上のデフォルトのメッセージ行。だから私は勝てないようです！私はBootstrap 3を使用しています。これはSpring MVCアプリケーションです。

私は、DataTableフレームワークがより適しているのだろうかと思います。 FooTableに関するドキュメンテーションは円の中にあり、深みが欠けているようです。

本当にありがとうございます。

Answer 1

これが私の仕事：ここFooTable

<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th data-type="html" data-sort-use="text">HTML Column</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><a href="" ><b>James</b></a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

はあなたに解決の問題である：footableのフォーマッタ機能、これはあなたがカスタマイズの結合を完了しています。同じソリューションを探している他の人にこの情報を提供しています。

format footable column results