+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Footable plugin in Sitefinity

Footable plugin in Sitefinity

1 posts, 0 answered
  1. Sophie
    Sophie avatar
    5 posts
    Registered:
    09 Jun 2016
    29 Jun
    Link to this post

    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..):

    http://fooplugins.com/plugins/footable-jquery/

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

    <html>
    <head>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></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.

1 posts, 0 answered