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>

然后我得到了＃34;没有结果＆＃34;插入数据上方的默认消息行。所以我似乎无法获胜！我正在使用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的formatter功能，这为您提供了完整的自定义绑定。我正在为搜索相同解决方案的其他人提供此信息。

format footable column results

使用Footable中的链接不起作用？

2 个答案: