在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设置列和行还会在插入的数据(如：屏幕截图 )上方留下一个空白行。

如果我在表中通过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>

然后，我会得到插入数据上方的默认消息行“无结果”。看来我赢不了！我正在使用引导3，这是一个Spring应用程序。

我想知道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的格式化功能，这为您提供了完整的自定义绑定。我提供这个信息给其他人搜索相同的解决方案。

格式页脚列结果