<p>Please follow the below steps.</p>
<p><strong>Use a sorting class for each field.</strong></p>
<pre><code>&lt;table class=&quot;data&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class=&quot;sorting&quot; &gt;Name&lt;/th&gt;
            &lt;th class=&quot;sorting&quot;&gt;Age&lt;/th&gt;
            &lt;th class=&quot;sorting&quot;&gt;City&lt;/th&gt;
            &lt;th class=&quot;sorting&quot;&gt;State&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
&lt;/table&gt; 
</code></pre>
<p><strong>Then include this script:</strong></p>
<pre><code>&lt;script&gt;
    $(document).ready(function () {
        setTimeout(function() {
            $(&quot;th.sorting&quot;).each(function(){
                var th_obj = $(this);
                
       th_obj.removeClass('ordered').removeClass('asc').removeClass('desc');
                var a_class = th_obj.find('a').attr(&quot;class&quot;);
                if(a_class != '' &amp;&amp; a_class != undefined) {
                    th_obj.addClass('ordered').addClass(a_class);
                }
            });
        }, 100);
    });
&lt;/script&gt;
</code></pre>
<p><strong>Also Include CSS for sorting class: (You can change this according to your use and theme)</strong></p>
<pre><code>table.data thead th.ordered:not(.loading):after {
    display: block;
    content: '';
    font-size: 0;
    width: 5px;
    height: 5px;
    border: solid #596673;
    border-width: 0 2px 2px 0;
    position: absolute;
}
table.data thead th.ordered {
   background-color:unset;
}
body.ltr table.data thead th.ordered:not(.desc):after {
    top: calc(50% - 1px);
}
body.ltr table.data thead th.ordered.desc:after {
     top: calc(50% - 4px);
}
</code></pre>
<p>I hope this will work for you.</p>
<p>Thanks.</p>

CC BY-SA 4.0
2021-09-01T05:38:56.807Z
2021-09-01T05:38:56.807Z
ZealousWeb
<p>The Table includes this field:</p>
 
    
        
            Name
            Age
            City
            State
         
     
   

<craft3><plugin-development><javascript>
I have a custom table in my craft plugin at the backend and I have to include custom sorting on each field of the table using javascript
# I have a custom table in my craft plugin at the backend and I have to include custom sorting on each field of the table using javascript

(Asked by: username_0 on 2021-09-01)

The Table includes this field:

Name
Age
City
State

**Tags:** craft3, plugin-development, javascript

---

## 1 answers

### Answer by username_1 on 2021-09-01. Score: 1

Please follow the below steps.
Use a sorting class for each field.

    
        
            Name
            Age
            City
            State
        
    
 

Then include this script:


Also Include CSS for sorting class: (You can change this according to your use and theme)
table.data thead th.ordered:not(.loading):after {
    display: block;
    content: '';
    font-size: 0;
    width: 5px;
    height: 5px;
    border: solid #596673;
    border-width: 0 2px 2px 0;
    position: absolute;
}
table.data thead th.ordered {
   background-color:unset;
}
body.ltr table.data thead th.ordered:not(.desc):after {
    top: calc(50% - 1px);
}
body.ltr table.data thead th.ordered.desc:after {
     top: calc(50% - 4px);
}

I hope this will work for you.
Thanks.


---

