table sorting in onsen ui

[shweta]

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.

[misterjunio]

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

[shweta]

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

[misterjunio]

@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);

[shweta]

@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

[misterjunio]

@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);

[shweta]

Its Not working its giving value as undefined in console.

[misterjunio]

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

[shweta]

This post is deleted!

[misterjunio]

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

[shweta]

@misterjunio Thanks Its working now. Can we make footable renders fast. Like when I navigate to pages it waits for some seconds then loads.

[misterjunio]

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