Using links within Footable not working?

Question

I am working with FooTable on a page that received data via a simple ajax call. My table on the page is:

  <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>

The JavaScript code to run it is:

$( 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();     
});

However, FooTable strips out the html tag whenever the data populates. Setting up the columns and rows via JavaScript also leaves a blank row above the inserted data such as: screenshot

If I setup my columns via HTML within the table

<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>

Then I get the "No Results" default message row above the inserted data. So it seems I can't win! I am using Bootstrap 3. This is a Spring MVC application.

I'm wondering if the DataTable framework would be better suited. The documentation on FooTable seems to go in circles and lacks depth.

Any help is truly appreciated!

score 1 · Answer 1 · answered Nov 02 '16 at 19:30

This worked for me: 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>

score 0 · Answer 2 · answered Aug 12 '17 at 22:42

0

Here is solution to you problem: formatter function of footable, this provide you complete binding of customisation. I am providing this info for other people searching same solutions.

format footable column results

answered Aug 12 '17 at 22:42

Qaiser Mehmood

202
2
10

Using links within Footable not working?

2 Answers2