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.

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

How to disable sort feature temporary via JS control before sorting fire #138

Open
jimmy123j opened this issue Oct 3, 2024 · 2 comments

Comments

@jimmy123j
Copy link

jimmy123j commented Oct 3, 2024

I use JS insert new <tr> with dynamic data after clicked specific <td> with toggle feature

and I need to disable sort feature temporary after new inserted and toggle

I tried to remove <table> class "table-sort" and "table-process" or add "disable-sort" into each <th> not working

seems inject sorting after script loading

does any way to disable table sort via JS control before sorting feature fire ? ( flow sample as img )

Or can add JS control feature into next version update ? ( e.g. enable / disable / reload options ... etc. )

btw, table-sort support null last ? ( put the empty cell to the last always after sorting )
old issue seems without support the feature class then closed

Thanks !!!

image

@jimmy123j jimmy123j changed the title How to disable sort feature temporary JS control before sorting fire How to disable sort feature temporary via JS control before sorting fire Oct 3, 2024
@LeeWannacott
Copy link
Owner

LeeWannacott commented Oct 3, 2024

specific with toggle feature

Where would this specific <td> be located in your image?, disable-sort wont work on a <td> only a <th> although maybe it should (I changed to support making <td> clickable because many websites seem to do it (so the browser ext wouldn't work); its not semantic html though)?

Are you looking to disable sort on a specific <th>, or all of them?

btw, table-sort support null last ? ( put the empty cell to the last always after sorting )

It puts empty cells after a-z, so its a-znull, or nullz-a depending on how many times the header is clicked. It should probably ideally be changed to a-znull z-anull.

@jimmy123j
Copy link
Author

jimmy123j commented Oct 3, 2024

specific with toggle feature

Where would this specific <td> be located in your image?, disable-sort wont work on a <td> only a <th> although maybe it should (I changed to support making <td> clickable because many websites seem to do it (so the browser ext wouldn't work); its not semantic html though)?

Are you looking to disable sort on a specific <th>, or all of them?

disable whole specific table, in img I click A5 cell to insert new tr 1 (a) after tr 1 (A)
and I want the table disable sort after new tr 1 inserted, so I tried 2 ways

  1. remove "table-sort" class from <table>, not work
  2. add "disable-sort" into all <th> class, not work

here is sample with JQuery, hope can make you understand my purpose
btw, disable specific <table> sort or specific <th> sorting 2 control which decided by user needed is better

`

    <thead>
        <tr> <th class="punct-sort">Col 1</th> <th class="punct-sort">Col 2</th> <th class="punct-sort">Col 3</th> <th class="punct-sort">Col 4</th> </tr>
    </thead>
    
    <tbody>
        <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>Insert tr</td> </tr>
        <tr> <td>B1</td> <td>B2</td> <td>B3</td> <td>Insert tr</td> </tr>
        <tr> <td>C1</td> <td>C2</td> <td>C3</td> <td>Insert tr</td> </tr>
    </tbody>

</table>

<script>

    $("table tbody").on( "click", "td:last-child", function() {

        // Insert New tr after Insert tr <td> tag clicked
        $(this).after(` <tr class="New"> <td>N1</td> <td>N2</td> <td>N3</td> <td>Delete tr</td> </tr> `) ;

         // Disable this td mother table sorting feature after Insert tr <td> tag clicked ( I tried, but not work )
        $(this).closest("table")[0].removeClass(`table-sort`) ;

    }) ;

    // ==

    $("table tbody").on( "click", "tr.New td:last-child", function() {

        // Delete New tr after New tr last td clicked
        $(this).remove() ;

         // Enable this td mother table sorting feature after deleted New tr
        $(this).closest("table")[0].addClass(`table-sort`) ;

    }) ;

</script>
`

btw, table-sort support null last ? ( put the empty cell to the last always after sorting )

It puts empty cells after a-z, so its a-znull, or nullz-a depending on how many times the header is clicked. It should probably ideally be changed to a-znull z-anull.

I try the float number with null, null will at first with asc, but I used the punct-sort for float
maybe add null last class for user is good way to control ? ( null last or not by user decide )

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants