Footable plugin in Sitefinity

Posted by Community Admin on 04-Aug-2018 07:26

Footable plugin in Sitefinity

All Replies

Posted by Community Admin on 29-Jun-2016 00:00

Hi,

I'm trying to use the Footable plugin within a widget I create for Sitefinity however the table is always collapsed whatever the size of the page (desktop, phone..):

fooplugins.com/.../

If I use the plugin in a simple HTML page this code is working perfectly:

<html>
<head>

<link href="cdnjs.cloudflare.com/.../footable.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ajax.googleapis.com/.../script>
<script type="text/javascript" src="cdnjs.cloudflare.com/.../script>
<script type="text/javascript">
        $(function ()
            $('#idTable').bind('footable_breakpoint', function()
                $('#idTtable').trigger('footable_expand_first_row');
            ).footable();
        );
 </script>

</head>
<body>
<table class="footable" id="idTable">
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
      <th data-hide="phone,tablet">Adress</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
      <td>Une adresse ici en Nouvelle Angleterre</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
      <td>Une adresse ici en Nouvelle Angleterre</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
      <td>Une adresse ici en Nouvelle Angleterre</td>
    </tr>
  </tbody>
</table>

</body>
</html>

But when created the widget for Sitefinity all is collapsed whatever the page size.

I added a table to my ascx page (exactly the same as the table above).

I added a javascript file directly on the page:

<script type="text/javascript" src="ajax.googleapis.com/.../script>
<script type="text/javascript" src="cdnjs.cloudflare.com/.../script>
<script type="text/javascript">
        $(function ()
            $('#idTable').bind('footable_breakpoint', function()
                $('#idTtable').trigger('footable_expand_first_row');
            ).footable();
        );
 </script>

But when loading the page the table is already collapsed with the "plus" icon... Do you have an idea on how to resolve this problem?

Thank you.

This thread is closed