Sort DataTables with multiply -Tags

Tranduil

I got a table with multiply <tbody>-Tags and I wanted to know if there is an option to only sort one specific <tbody>-Tag of the Table.

I found this thread form 2016 where it is stated that it does'nt work at the moment but may be added in the future. Is there any new Information on that?

https://datatables.net/forums/discussion/36037/can-we-sort-the-table-with-muliplt-tbody

kthorngren

The HTML docs still specifies that Datatables supports only one tbody tag.

Kevin

Tranduil

Well, unlucky. Thanks nonetheless!

The workaround that I used was: I wrote the second <tbody> content inside a second <tr>-Tag of the table header and set "bSortCellsTop": true so that the top row is sorted.
That does a similar Job for what I wanted.

allan

Nice workaround.

The only reason I can really think of adding support for multiple tbody tags to DataTables would be for some kind of row grouping, but we can already do that with a single tbody and the relevant data, and it supports multi-level grouping, which multiple tbody's would not.

Happy to get feedback on use cases for multiple tbody elements though.

Allan

xiaoyu_mnd

Hi, I am trying to use the table with Vue3.
I am trying to create a child for each row which expands on click. I am aware of the row.child() method but that doesn't seem to work with customized Vue component. So I created my own grouping:

                            <tbody v-for="entry, index in data" :key="index">
                                <tr class="align-items-cenicon-linkter align-middle">
                                    <td v-if="canExpand" class="dt-control">
                                        <div class="" type="button"><span class="material-symbols-rounded"
                                                @click="rowDisplay[index] = !rowDisplay[index]">
                                                keyboard_double_arrow_right
                                            </span></div>
                                    </td>
                                    <td v-for="key, keyIndex in Object.keys(entry)" :key="keyIndex">
                                        <div
                                            :class="styleConfig && styleConfig[keyIndex] ? styleConfig[keyIndex][index] : ''">
                                            {{
                                                entry[key] }}
                                        </div>
                                    </td>
                                    <td v-if="hasSuffix" @click="onItemClicked(entry)">
                                        <slot></slot>
                                    </td>
                                </tr>
                                <tr v-show="rowDisplay[index]" class="row-child">
                                    <td colspan="5">
                                        <Grid :data="entry"></Grid>
                                    </td>
                                    <!-- Not rendered but holds place for unused columns -->
                                    <td v-for="index in numOfCol" v-show="false">
                                    </td>
                                </tr>
                            </tbody>

Which of course messed up the whole filter and pagination. Is there any workaround on that? Thanks.