Footable plugin in Sitefinity - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Footable plugin in Sitefinity

  • Footable plugin in Sitefinity
  • 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.