List.js need to strip anchor tag from items (column)

[tousif786]

Here is the sample of html code

HTML

<table class='sticky-list'>
    <thead>
        <tr>
            <th class='sort header-company-name' data-sort='sort-0'>Company Name</th>
            <th class='sort header-phone-number' data-sort='sort-1'>Phone Number</th>
            <th class='sort header-website' data-sort='sort-2'>Website</th>
            <th class='sort header-email' data-sort='sort-3'>Email</th>
        </tr>
    </thead>
    <tbody class='list'>
        <tr class='odd'>
            <td class='sort-0  stickylist-text'><a href='http://example.com/?company_id=1010'>Testing company</a></td>
            <td class='sort-1  stickylist-phone '></td><td class='sort-2  stickylist-text'></td>
            <td class='sort-3  stickylist-text '></td>
        </tr>
        <tr class='even'>
            <td class='sort-0  stickylist-text'><a href='http://example.com/company_id=999'>kljkl</a></td>
            <td class='sort-1  stickylist-phone '></td>
            <td class='sort-2  stickylist-text '></td>
            <td class='sort-3  stickylist-text '></td>
        </tr>
    </tbody>
</table>

JS
<script>var options = { valueNames: ['sort-0','sort-1','sort-2','sort-3',] };var userList = new List('table_parent_box_id_here', options);</script>

Issue
While sorting it took column one ('sort-0') like this <a href='http://example.com/?company_id=1010'>Testing company</a> and sort it accordingly, which wrong. I just need text like this this Testing company to sort. How can do that? Thanks in advance.

[sphism]

Hmm.. Not sure. You seem to be trying to sort the columns but leaving the rows in the same order. Is that what you are trying to do?

I added it to a codepen, have a play around in that and see http://codepen.io/sphism/pen/bZYXGE

[sphism]

Ok that codepen is now working how i'd expect it to, the th's sort the rows so that that column is a-z or z-a (when you click it again)

Were you trying to sort the row's like that?

The resason it may have been acting weird for you is that you had tags wrapping your data, so instead of the data being a, b, c, d it's a, b ... so the alphabetical order would have been based on that whole chunk of html... in this case it would be a-z of the href's in the links.

If you want an link around the data then you can put your sort-0, sort-1 classes on the a links, of wrap the data with a

hope that helps

[sphism]

Ah... re-read your question and finally understood what you meant. This is what you want: http://codepen.io/sphism/pen/bZYXGE

[tousif786]

Thanks for your effort. But I have already tried that "Working" table. That work for me as well but after 5 to 7 click, means when you click on like first column it will give you js error for match in list.js and after several clicks then it start to sort.

Another thing is that I'm generating this tables dynamically so I don't know which one has tag or not. Is there any way to tell list.js to just pick text and then sort?

[ctf0]

also having that issue with anchors inside td, have anyone found a solution for this ?

[tousif786]

Yes, I figure out the solution. You just need to place this class sort-0 on a correct html tag. So change this

<td class='sort-0 stickylist-text'><a href='http://example.com/?company_id=1010'>Testing company</a></td>

to

<td class='stickylist-text'><a class="sort-0" href='http://example.com/?company_id=1010'>Testing company</a></td>

[ctf0]

@tousif786 focken legend 🏆