Table not dynamically sorting

Wappler General Need Help
1

Follow these tutorials Dynamic Sortable Table and https://www.youtube.com/watch?v=kYDAPwuf_NQ&t=179s
I'm getting no sorting from clicking the arrows. The URL does change showing desc or asc.

Thanks in advance...

Here's the page code.

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" is="dmx-app" id="wip" appConnect="local" bootstrap5="yeti" components="{dmxStateManagement:{},dmxBootstrap5TableGenerator:{}}" -->
<dmx-query-manager id="qry_wip"></dmx-query-manager>
<dmx-serverconnect id="serverconnect1" url="/api/members/qry_membersRoles" dmx-param:sort="qry_wip.data.sort" dmx-param:dir="qry_wip.data.dir"></dmx-serverconnect>
<meta name="ac:route" content="/wip">
<div class="container">
    <div class="row">
        <div class="col">
            <table class="table">
                <thead>
                    <tr>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','user_id');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='user_id' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='user_id' && qry_wip.data.dir == 'desc'">User</th>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','first_name');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='first_name' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='first_name' && qry_wip.data.dir == 'desc'">First name</th>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','last_name');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='last_name' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='last_name' && qry_wip.data.dir == 'desc'">Last name</th>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','email');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='email' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='email' && qry_wip.data.dir == 'desc'">Email</th>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','zip');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='zip' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='zip' && qry_wip.data.dir == 'desc'">Zip</th>
                        <th class="sorting" dmx-on:click="qry_wip.set('sort','signup_date');qry_wip.set('dir',qry_wip.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="qry_wip.data.sort=='signup_date' && qry_wip.data.dir == 'asc'" dmx-class:sorting_desc="qry_wip.data.sort=='signup_date' && qry_wip.data.dir == 'desc'">Signup date</th>
                    </tr>
                </thead>
                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="serverconnect1.data.repeat" id="tableRepeat2" dmx-state="qry_wip" dmx-sort="sort" dmx-order="dir">
                    <tr>
                        <td dmx-text="user_id"></td>
                        <td dmx-text="first_name"></td>
                        <td dmx-text="last_name"></td>
                        <td dmx-text="email"></td>
                        <td dmx-text="zip"></td>
                        <td dmx-text="signup_date"></td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
2

Have you set the query parameters values in the server action properties on the page?

3

Yes

image
image1170×527 48.4 KB

4

An you post a screenshot of your database query with the query builder open ?

5

image
image956×619 21.4 KB

6

image
image853×553 20.4 KB

7

That's the issue. Don't add the table_name.* but instead select the columns and add them to the query builder.

8

Bingo - Thanks @Teodor - I knew it was gonna be something simple.

1 Like