Help with SearchBuilder

PaulHermans

Link to test case: https://jsbin.com/piwihez/edit?output
Debugger code (debug.datatables.net): N/A
Error messages shown: None
Description of problem:
The issue is that i want to display the status as a bootstrap5 badge, but if i do that all by itself, the sorting on the table fails. I thought i could do it by adding a hidden div for sort-order, which works great, except that now in the search builder when I try to filter based on the status = xxx the choices i get say "Pending Pending". I know this is related to the hidden div i added, but I don't quite understand how to do this better.

My ideal HTML for the status column would be:

<td class="text-start sorting_1">
       <span class="badge bg-secondary">Pending</span>
</td>

I also tried this, but it didn't seem to work either

<td class="text-start sorting_1" data-order="Pending">
       <span class="badge bg-secondary">Pending</span>
</td>

so I am not really sure how to fix this. Any advice or pointers would be very welcome!

allan

When you say the sorting fails, what do you mean?

            <td class="text-start">
                <span class="badge bg-secondary">Pending</span>
            </td>

Should work okay: https://jsbin.com/givimaruji/edit?html%2Coutput= . Then the status column will be sorted alphabetically.

Allan