table sorting in onsen ui
-
<ons-list modifier=“inset” class=“topMargin”>
<ons-list-header>Recently Visited
</ons-list-header>
<div class=“example”>
<table id=“sorting-example-1” class=“table” data-sorting=“true”>
<thead>
<tr><th> Name</th> <th class="text-center">CMP </th> <th> </th> </tr> </thead> <tbody> <tr> <td> <p class="fontMedium">HDFC BANK</p> </td> <td class="recentValues"> <p>1399.15 </p> <ons-icon icon="ion-arrow-up-a"></ons-icon> <p class="time_style">-16.40(-1.16%)</p> </td> <td class="textright"> <ons-icon icon="ion-ios-heart-outline"></ons-icon> <ons-icon icon="ion-chevron-right"></ons-icon> </td> </tr> <tr> <td> <p class="fontMedium">Kotak Bank</p> </td> <td class="recentValues"> <p>23655.15 </p> <ons-icon icon="ion-arrow-up-a"></ons-icon> <p class="time_style">-32.40(-1.16%)</p> </td> <td class="textright"> <ons-icon icon="ion-ios-heart-outline"></ons-icon> <ons-icon icon="ion-chevron-right"></ons-icon> </td> </tr> </tbody> </table> </div>
And i am initialising foo table by
setTimeout(function(){ $(’#sorting-example-1’).footable();}, 1000);
</ons-list>
-
@shweta I checked and it seems the problem is caused by your selection of the table. Apparently footable.js needs to be used exactly as in their documentation. Try using
setTimeout(function () { $('.table').footable(); }, 1000);
instead ofsetTimeout(function(){ $(’#sorting-example-1’).footable();}, 1000);
-
@misterjunio Thanks for your reply. But i have used same thing in my code. Foo table working fine only on first page load when i am navigating through tabs and different pages its stops working. Even when i again navigate to home page it stops working on my first page also. That means foo table loading only on first page load. Please help
-
@shweta Try calling the
footable()
function every time the page with your table is shown making use of theshow
event. Something like this:document.addEventListener('show', function (event) { if (event.target.matches('#YOURPAGE')) { $('.table').footable(); } }, false);
-
Its Not working its giving value as undefined in console.
-
@shweta Which value? Can you share the console or/and some code? Otherwise it’s difficult to help :sweat_smile:
-
This post is deleted!
-
@shweta Sorry I wasn’t clear but for the code I sent you before to work
#YOURPAGE
should be the id of theons-page
you’re about to show, so instead of#settings.html
you should put an id on theons-page
right below it and refer to it on the script. Not sure if that’s what’s causing the problem but give it a try.
-
@misterjunio Thanks Its working now. Can we make footable renders fast. Like when I navigate to pages it waits for some seconds then loads.
-
@shweta That is related to the plugin itself as well, I can’t think of a way to improve that performance if you’re loading a lot of data :confused: