LeeWannacott / table-sort-js

HTML table sorting with no dependencies.
https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.js
MIT License
73 stars 27 forks source link

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

Open jimmy123j opened 1 week ago

jimmy123j commented 1 week ago

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

LeeWannacott commented 1 week ago

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 commented 1 week ago

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

`

Col 1 Col 2 Col 3 Col 4
A1 A2 A3 Insert tr
B1 B2 B3 Insert tr
C1 C2 C3 Insert tr
<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