Hello, Any suggestions on getting footable to work with jQueryMobile

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

jQueryMobile about footable HOT 3 CLOSED

fooplugins commented on July 17, 2024

jQueryMobile

from footable.

Comments (3)

mleisher commented on July 17, 2024

jQuery Mobile does it's own version of table management. FooTable won't work as far as I can tell. For jQuery Mobile, you have to wrap tables like this:

<div data-role='page'>
  <div data-role='content'>
    <div data-role='table'>
      <table>
       ...
      </table>
   </div>
  </div>
</div>

from footable.

valos commented on July 17, 2024

FooTable works perfectly well with jQuery Mobile.
You need just to reorder the header declarations and bind your code to the pageshow event.

...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link href="css/footable.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script>
$(document).bind("mobileinit", function () {
  $(document).on('pageshow', function() {
    $('table').footable();
  });
});
</script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
...