Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Colspan sorting appears to be ignoring data-sort column values #62

Closed
nk9 opened this issue Aug 8, 2022 · 7 comments
Closed

Colspan sorting appears to be ignoring data-sort column values #62

nk9 opened this issue Aug 8, 2022 · 7 comments

Comments

@nk9
Copy link

nk9 commented Aug 8, 2022 •
edited
Loading

Now the #58 has landed,colspan is working in that clicks on subsequent <th> elements aren't sorting the wrong column. However, it looks like the colspan columns are ignoring the data-sort attribute of a given column.

Expected

A click on the colspan element to sort first by the data-sort attribute of the first column inside the colspan, and then by the value of the cells in that same column if a cell doesn't have the data-sort attribute.

What's happening today

It looks like the table is ignoring the data-sort attribute and just always sorting by the value.

Reproducible case

image

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .table-sort td,
        .table-sort th {
          padding: 10px;
        }

        .table-sort th {
          background: #808080;
          color: #fff;
          cursor: pointer;
          font-weight: normal;
          text-align: left;
          text-transform: capitalize;
          vertical-align: baseline;
          white-space: nowrap;
        }

        .table-sort th:hover {
          color: #000;
        }
    </style>
</head>
<body>
    <table class="available table-sort table-arrows">
        <thead>
            <tr>
                <th class="disable-sort"></th>
                <th class="">Category</th>
                <th class="show_name">Show</th>
                <th colspan="2" class="">Overall</th>
                <th colspan="2" class="">On Our Dates</th>
                <th class="">First Sold Out</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tags"></td>
                <td class="category">Comedy</td> <td class="show_name">Show 1</td>
                <td class="ratio all" data-sort="72">18/25</td>
                <td class="pct all">72%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-07-30</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Music</td>
                <td class="show_name">Show 2</td>
                <td class="ratio all" data-sort="60">6/10</td>
                <td class="pct all">60%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-08-04</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Theatre</td>
                <td class="show_name">Show 3</td>
                <td class="ratio all" data-sort="47">7/15</td>
                <td class="pct all">47%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-07-19</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 4</td>
                <td class="ratio all" data-sort="67">10/15</td>
                <td class="pct all">67%</td>
                <td class="ratio ours" data-sort="67">2/3</td>
                <td class="pct ours">67%</td>
                <td>2022-07-19</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 5</td>
                <td class="ratio all" data-sort="75">9/12</td>
                <td class="pct all">75%</td>
                <td class="ratio ours" data-sort="50">1/2</td>
                <td class="pct ours">50%</td>
                <td>2022-07-29</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 6</td>
                <td class="ratio all" data-sort="67">16/24</td>
                <td class="pct all">67%</td>
                <td class="ratio ours" data-sort="50">2/4</td>
                <td class="pct ours">50%</td>
                <td>2022-07-26</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 7</td>
                <td class="ratio all" data-sort="62">16/26</td>
                <td class="pct all">62%</td>
                <td class="ratio ours" data-sort="50">2/4</td>
                <td class="pct ours">50%</td>
                <td>2022-07-31</td>
            </tr>
        </tbody>
    </table>
    <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script>
</body>
</html>
@LeeWannacott
Copy link
Owner

@nk9 That is not ideal; thanks for opening an issue.

@nk9
Copy link
Author

nk9 commented Aug 8, 2022 •
edited
Loading

I've tried working around this by removing the colspans, but the data-sort attribute is just being ignored. Here, I sorted by Ratio ascending, with a data-sort value on each relevant cell. But the outcome is still sorted by the cell values. The string in the data-sort attribute is expected to override the cell value, correct?

image

<!DOCTYPE html>
<html>
<body>
    <table class="table-sort table-arrows">
        <thead>
            <tr>
                <th>Ratio</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ratio all" data-sort="72">18/25</td>
                <td>72%</td>
            </tr><tr>
                <td class="ratio all" data-sort="60">6/10</td>
                <td>60%</td>
            </tr><tr>
                <td class="ratio all" data-sort="47">7/15</td>
                <td>47%</td>
            </tr><tr>
                <td class="ratio all" data-sort="10">1/10</td>
                <td>10%</td>
            </tr><tr>
                <td class="ratio all" data-sort="05">1/20</td>
                <td>5%</td>
            </tr>
        </tbody>
    </table>
    <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script>
</body>
</html>

@LeeWannacott
Copy link
Owner

LeeWannacott commented Aug 8, 2022 •
edited
Loading

@nk9 I think you are missing "data-sort" on the <th> column for example: <th class="data-sort">Ratio</th>. Can you check if this works; it might be the problem with your original example as well.

@LeeWannacott
Copy link
Owner

LeeWannacott commented Aug 8, 2022 •
edited
Loading

I tried out your first example adding data-sort class to the <th> seems to fix the data-sort not working , although the second col-span "On Our Dates" seems to be having trouble with counting the clicks, or something...

@nk9
Copy link
Author

nk9 commented Aug 9, 2022

Oh! Indeed, I didn't realise that you had to declare a column as taking its data from the data-sort attribute. Now that I've added that in, this is (mostly) working as expected. But yes, it seems that sometimes a click gets swallowed and nothing changes. Thanks for helping clarify matters. Can I just leave this open and retitle for this click issue?

@LeeWannacott
Copy link
Owner

LeeWannacott commented Aug 9, 2022 •
edited
Loading

Can I just leave this open and re-title for this click issue?

Sure, feel free to do that. You could check to see if the click issue is due to having two colspan <th> back to back by inserting an extra <th> between them (that doesn't have a colspan); that might be helpful in narrowing down the issue.

@LeeWannacott
Copy link
Owner

LeeWannacott commented May 18, 2023 •
edited
Loading

PR: #91 Release:https://github.com/LeeWannacott/table-sort-js/releases/tag/1.15.2

@nk9
Should fix the click being swallowed. Not sure exactly why it was happening I think it was a combination of using colspan and data-sort not having the logic to get colspans it was only implemented for default sort : /

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nk9 @LeeWannacott