sort table based on select options using jquery

I’m trying to implement sorting of the table using select options(names/type/doc/date) and click on the button the table should display the sorting result. spent almost a day on this didn’t get any idea where am I going wrong. Do I need to call the same function for each of the below options? Please help. Any help would be appreciated. Thanks in advance. Below is , my code.

$(document).ready(function () { 
    $(document).on("click", "#nameselect select abc ", function() {
  sortTable("nameselect", this);
});


function sortTable(column, me) {
  var table = $(me).parents('table').eq(0),
    rows = table.find('tr:gt(0)').toArray().sort(doComparer($(this).index()))
  me.asc = !me.asc
  if (!me.asc) {
    rows = rows.reverse()
  }

  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i])
  }
}

function doComparer(index) {
  return function(a, b) {
    a = getCellValue(a, index);
    b = getCellValue(b, index);
    return $.isNumeric(a) && $.isNumeric(b) ? a - b : a.toString().localeCompare(b)
  }
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div style="margin-left:10px;display:inline-flex;" id="nameselect">
    <select style="width:120px;" required="">
      <option value="">select</option>
      <option class="abc" value="Mary">Names</option>
      <option value="">Type</option>
      <option value="">Doc</option>
      <option value="">Date</option>
    </select>
  </div>  
  <button type=button>Ascending</button>

  <table class="" cellpadding="1" cellspacing="1" style="margin-top:10px;" id="myTable">
    <thead>
      <tr id="table-header">
        <th><label> NAME</label></th>
        <th><label> TYPE</label></th>
        <th><label>Doc</label></th>
        <th ><label>Date</label></th>
      </tr>
    </thead>
    <tbody id="">
      <tr >
        <td ><label class="nameselect">Mary</label></td>
        <td><label>text1</label></td>
        <td><label>word</label></td>
        <td><label style="margin-left:10px">1/1/21</label></td>
      </tr>
      <tr class="" data-type="John">
        <td ><label class="nameselect">John</label></td>
        <td><label>text2</label></td>
        <td><label>Excel</label></td>
        <td><label style="margin-left:10px">31/1/21</label></td>
      </tr>
      <tr class="" data-type="Martin">
        <td><label class="nameselect">Martin</label></td>
        <td><label>text3</label></td>
        <td><label>pdf</label></td>
        <td><label style="margin-left:10px">21/2/21</label></td>
      </tr>
      <tr class="" data-type="Rozi">
        <td><label class="nameselect">Rozi</label></td>
        <td><label>text4</label></td>
        <td><label>powepoint</label></td>
        <td><label style="margin-left:10px">5/10/20</label></td>
      </tr>
    </tbody>
  </table>

114 thoughts on “sort table based on select options using jquery”

  1. I must voice my admiration for your kind-heartedness for men and women who really want help on in this area of interest. Your personal commitment to passing the solution up and down came to be remarkably powerful and has always enabled guys just like me to attain their targets. Your new helpful information signifies this much to me and even more to my peers. Thanks a ton; from everyone of us.

    Reply
  2. I was just looking for this information for a while. After six hours of continuous Googleing, at last I got it in your website. I wonder what’s the lack of Google strategy that don’t rank this kind of informative websites in top of the list. Normally the top sites are full of garbage.

    Reply