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++) {

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=""></script>
<script src=""></script>
<link rel="stylesheet" href="" />
<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>
  <button type=button>Ascending</button>

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

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

Leave a Comment