More in this section
Forums / Developing with Sitefinity / Footable plugin in Sitefinity

Footable plugin in Sitefinity

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
1 posts, 0 answered
  1. Sophie
    Sophie avatar
    5 posts
    Registered:
    09 Jun 2016
    29 Jun 2016
    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