Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-09-01T05:38:56.807Z
Answers.LastActivityDate: 2021-09-01T05:38:56.807Z
Answers.UserDisplayName: ZealousWeb
Body: <p>The Table includes this field:</p>
   
      
          
              Name
              Age
              City
              State
           
       
     
  
Tags: <craft3><plugin-development><javascript>
Title: 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
ThreadText: # 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.**
  
  ```
  <table class="data">
      <thead>
          <tr>
              <th class="sorting" >Name</th>
              <th class="sorting">Age</th>
              <th class="sorting">City</th>
              <th class="sorting">State</th>
          </tr>
      </thead>
  </table> 
  
  ```
  
  **Then include this script:**
  
  ```
  <script>
      $(document).ready(function () {
          setTimeout(function() {
              $("th.sorting").each(function(){
                  var th_obj = $(this);
                  
         th_obj.removeClass('ordered').removeClass('asc').removeClass('desc');
                  var a_class = th_obj.find('a').attr("class");
                  if(a_class != '' && a_class != undefined) {
                      th_obj.addClass('ordered').addClass(a_class);
                  }
              });
          }, 100);
      });
  </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.
  
  
  ---
  
  