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>

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

Leave a Comment