footable v3 won't display button elements in rows

Question

I have a problem that occurs with Footable version 3 (for Bootstrap) that did not occur with version 2. Button elements show up briefly, then disappear altogether (in the HTML, only the button's text is left - the tags are removed!). Is there a way to get around this issue (potential bug)? The docs make no mention of this.

<table class="table table-striped toggle-arrow-alt">
                    <thead>
                        <tr>
                            <th>This</th>
                            <th>Is</th>
                            <th>A</th>
                            <th>TEST</th>
                            <th data-breakpoints="xs sm">Of</th>
                            <th data-breakpoints="xs sm">the emergency webcast system</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                            <td>foo bugs are not cool</td>
                            <td>$123,847.88</td>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                        </tr>
                        <tr>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                            <td>foo bugs are not cool</td>
                            <td>$99,847.88</td>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                        </tr>
                        <tr>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                            <td>foo bugs are not cool</td>
                            <td>$153,847.88</td>
                            <td>Hi There!</td>
                            <td>
                                <button>?</button></td>
                        </tr>

                    </tbody>
                </table>

And the header (maybe the script order is wrong - though it will resize)

    <head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Scripts/FooTable-3/bootstrap/css/footable.bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/FooTable-3/bootstrap/js/footable.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".table").footable({
                "paging": { "enabled": true },
                "sorting": { "enabled": true }
            });


        });
    </script>
</head>

When I view the source in HTML from Chrome (note that the button element is completely missing):

<tr><td class="footable-first-visible" style="display: table-cell;">Hi There!</td><td style="display: table-cell;">
                                ?</td><td style="display: table-cell;">foo bugs are not cool</td><td style="display: table-cell;">$123,847.88</td><td style="display: table-cell;">Hi There!</td><td class="footable-last-visible" style="display: table-cell;">
                                ?</td></tr>

anyway - driving me mad trying to fix this

score 1 · Accepted Answer · answered Jan 09 '17 at 00:50

1

I got it figured out. In version 3, there is a type specifier, the default being "text", it needs to be set to "html" for each column that requires html.

$('.table').footable({
    "columns": [{
        "type": "text"
    },{
        "type": "html"
    },{
        ...
    }]
});

valid types are "text", "html", "number" and "date"

answered Jan 09 '17 at 00:50

MC9000

2,076
7
45
80

the only thing I've noticed about version 3 is that it flickers. Apparently, it redraws the table when paging or sorting on the client side even when it does not need to. Very annoying for the user. – MC9000 Jan 11 '17 at 23:37

footable v3 won't display button elements in rows

1 Answers1