As the question suggests i cannot seem to configure foo-tables, even in the most basic way - 3 columns, last column is the toggle which shows the detail row. My markup code is thus:
$('.footable').footable({});
.footable {
font-size: 88%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table footable fw-labels" data-page-navigation=".pagination" data-page-size="6">
<thead>
<tr>
<th>Action</th>
<th data-toggle="true">Details</th>
<th data-hide="all">Details</th>
</tr>
</thead>
<tbody>
<tr class="row-primary">
<td><span class="label label-primary">Primary</span>
</td>
<td>This is a Footable expandable <b class="text-primary">"Primary"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-primary"></code>
</td>
</tr>
<tr class="row-info">
<td><span class="label label-info">Info</span>
</td>
<td>This is a Footable expandable <b class="text-info">"Info"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-info"></code>
</td>
</tr>
<tr class="row-success">
<td><span class="label label-success">Success</span>
</td>
<td>This is a Footable expandable <b class="text-success">"Success"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-success"></code>
</td>
</tr>
<tr class="row-warning">
<td><span class="label label-warning">Warning</span>
</td>
<td>This is a Footable expandable <b class="text-warning">"Warning"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-warning"></code>
</td>
</tr>
<tr class="row-danger">
<td><span class="label label-danger">Danger</span>
</td>
<td>This is a Footable expandable <b class="text-danger">"Danger"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-danger"></code>
</td>
</tr>
<tr class="row-alert">
<td><span class="label label-alert">Alert</span>
</td>
<td>This is a Footable expandable <b class="text-alert">"Alert"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-alert"></code>
</td>
</tr>
<tr class="row-system">
<td><span class="label label-system">System</span>
</td>
<td>This is a Footable expandable <b class="text-system">"System"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-system"></code>
</td>
</tr>
<tr class="row-dark">
<td><span class="label label-dark">Dark</span>
</td>
<td>This is a Footable expandable <b class="text-dark">"Dark"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-dark"></code>
</td>
</tr>
<tr class="row-primary">
<td><span class="label label-primary">Primary</span>
</td>
<td>This is a Footable expandable <b class="text-primary">"Primary"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-primary"></code>
</td>
</tr>
<tr class="row-info">
<td><span class="label label-info">Info</span>
</td>
<td>This is a Footable expandable <b class="text-info">"Info"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-info"></code>
</td>
</tr>
<tr class="row-success">
<td><span class="label label-success">Success</span>
</td>
<td>This is a Footable expandable <b class="text-success">"Success"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-success"></code>
</td>
</tr>
<tr class="row-warning">
<td><span class="label label-warning">Warning</span>
</td>
<td>This is a Footable expandable <b class="text-warning">"Warning"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-warning"></code>
</td>
</tr>
<tr class="row-danger">
<td><span class="label label-danger">Danger</span>
</td>
<td>This is a Footable expandable <b class="text-danger">"Danger"</b> row</td>
<td>You can use this style by formatting the table row like this <code><tr class="row-danger"></code>
</td>
</tr>
</tbody>
<tfoot class="footer-menu">
<tr>
<td colspan="5">
<nav class="text-right">
<ul class="pagination hide-if-no-paging"></ul>
</nav>
</td>
</tr>
</tfoot>
</table>
I have an example template from which i got his code which works perfectly - but in the actual app im building the third row which should be hidden until toggled is un-rendered and shows as a third column. My setup is as follows:
FooTable - Version : 2.0.3
jQuery-1.11.1
jQuery UI - v1.11.0 - 2014-06-26
Chrome : Version 46.0.2490.80 m
Any pointers appreciated - thanks in advance.
BTW i have the correct footables css file referenced in my app (not shown in code snippet above)