table sorting in onsen ui



  • I am new into this framework. How do I Integrate table column sorting in onsen ui. I have use footable js for this. But it works only once on page load.


  • Onsen UI

    @shweta Can you show some code? I was able to use footable.js fine.



  • <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>

  • Onsen UI

    @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 of setTimeout(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


  • Onsen UI

    @shweta Try calling the footable() function every time the page with your table is shown making use of the show 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.


  • Onsen UI

    @shweta Which value? Can you share the console or/and some code? Otherwise it’s difficult to help :sweat_smile:



  • This post is deleted!

  • Onsen UI

    @shweta Sorry I wasn’t clear but for the code I sent you before to work #YOURPAGE should be the id of the ons-page you’re about to show, so instead of #settings.html you should put an id on the ons-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.


  • Onsen UI

    @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:


Log in to reply