Sorting Table Rows According To Table Header Column Using Javascript Or Jquery

I have something like this &l

Solution 1:

You might want to see this page: http://blog.niklasottosson.com/?p=1914

I guess you can go something like this:

DEMO:http://jsfiddle.net/g9eL6768/2/

HTML:

<tableid="mytable"><thead><tr><thid="sl">S.L.</th><thid="nm">name</th></tr>
   ....

JS:

//  sortTable(f,n)//  f : 1 ascending order, -1 descending order//  n : n-th child(<td>) of <tr>functionsortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return1*f;
        }
        return0;
    });

    functiongetVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_sl = 1; // flag to toggle the sorting ordervar f_nm = 1; // flag to toggle the sorting order
$("#sl").click(function(){
    f_sl *= -1; // toggle the sorting ordervar n = $(this).prevAll().length;
    sortTable(f_sl,n);
});
$("#nm").click(function(){
    f_nm *= -1; // toggle the sorting ordervar n = $(this).prevAll().length;
    sortTable(f_nm,n);
});

Hope this helps.

Solution 2:

use Javascript sort() function

var $tbody = $('table tbody');
$tbody.find('tr').sort(function(a,b){ 
    var tda = $(a).find('td:eq(1)').text(); // can replace 1 with the column you want to sort onvar tdb = $(b).find('td:eq(1)').text(); // this will sort on the second column// if a < b return 1return tda < tdb ? 1// else if a > b return -1
           : tda > tdb ? -1// else they are equal - return 0    
           : 0;           
}).appendTo($tbody);

If you want ascending you just have to reverse the > and <

Change the logic accordingly for you.

FIDDLE

Solution 3:

Offering an interactive sort handling multiple columns is nothing trivial.

Unless you want to write a good amount of code handling logic for multiple row clicks, editing and refreshing page content, managing sort algorithms for large tables… then you really are better off adopting a plug-in.

tablesorter, (with updates by Mottie) is my favorite. It’s easy to get going and very customizable. Just add the class tablesorter to the table you want to sort, then invoke the tablesorter plugin in a document load event:

$(function(){
    $("#myTable").tablesorter();
});

You can browse the documentation to learn about advanced features.

Solution 4:

I think this might help you: Here is the JSFiddle demo:

And here is the code:

var stIsIE = /*@cc_on!@*/false;
sorttable = {
  init: function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
    if (_timer) clearInterval(_timer);
    if (!document.createElement || !document.getElementsByTagName) return;
    sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
    forEach(document.getElementsByTagName('table'), function(table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    });
  },
  makeSortable: function(table) {
    if (table.getElementsByTagName('thead').length == 0) {
      the = document.createElement('thead');
      the.appendChild(table.rows[0]);
      table.insertBefore(the, table.firstChild);
    }
    if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
    if (table.tHead.rows.length != 1) return;
    sortbottomrows = [];
    for (var i = 0; i < table.rows.length; i++) {
      if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
        sortbottomrows[sortbottomrows.length] = table.rows[i];
      }
    }
    if (sortbottomrows) {
      if (table.tFoot == null) {
        tfo = document.createElement('tfoot');
        table.appendChild(tfo);
      }
      for (var i = 0; i < sortbottomrows.length; i++) {
        tfo.appendChild(sortbottomrows[i]);
      }
      delete sortbottomrows;
    }
    headrow = table.tHead.rows[0].cells;
    for (var i = 0; i < headrow.length; i++) {
      if (!headrow[i].className.match(/\bsorttable_nosort\b/)) {
        mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
        if (mtch) {
          override = mtch[1];
        }
        if (mtch && typeof sorttable["sort_" + override] == 'function') {
          headrow[i].sorttable_sortfunction = sorttable["sort_" + override];
        } else {
          headrow[i].sorttable_sortfunction = sorttable.guessType(table, i);
        }
        headrow[i].sorttable_columnindex = i;
        headrow[i].sorttable_tbody = table.tBodies[0];
        dean_addEvent(headrow[i], "click", sorttable.innerSortFunction = function(e) {

          if (this.className.search(/\bsorttable_sorted\b/) != -1) {
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted',
              'sorttable_sorted_reverse');
            this.removeChild(document.getElementById('sorttable_sortfwdind'));
            sortrevind = document.createElement('span');
            sortrevind.id = "sorttable_sortrevind";
            sortrevind.innerHTML = stIsIE ? '&nbsp<font face="webdings">5</font>' : '&nbsp;&#x25B4;';
            this.appendChild(sortrevind);
            return;
          }
          if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted_reverse',
              'sorttable_sorted');
            this.removeChild(document.getElementById('sorttable_sortrevind'));
            sortfwdind = document.createElement('span');
            sortfwdind.id = "sorttable_sortfwdind";
            sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
            this.appendChild(sortfwdind);
            return;
          }
          theadrow = this.parentNode;
          forEach(theadrow.childNodes, function(cell) {
            if (cell.nodeType == 1) {
              cell.className = cell.className.replace('sorttable_sorted_reverse', '');
              cell.className = cell.className.replace('sorttable_sorted', '');
            }
          });
          sortfwdind = document.getElementById('sorttable_sortfwdind');
          if (sortfwdind) {
            sortfwdind.parentNode.removeChild(sortfwdind);
          }
          sortrevind = document.getElementById('sorttable_sortrevind');
          if (sortrevind) {
            sortrevind.parentNode.removeChild(sortrevind);
          }

          this.className += ' sorttable_sorted';
          sortfwdind = document.createElement('span');
          sortfwdind.id = "sorttable_sortfwdind";
          sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
          this.appendChild(sortfwdind);
          row_array = [];
          col = this.sorttable_columnindex;
          rows = this.sorttable_tbody.rows;
          for (var j = 0; j < rows.length; j++) {
            row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
          }
          row_array.sort(this.sorttable_sortfunction);
          tb = this.sorttable_tbody;
          for (var j = 0; j < row_array.length; j++) {
            tb.appendChild(row_array[j][1]);
          }
          delete row_array;
        });
      }
    }
  },

  guessType: function(table, column) {
    sortfn = sorttable.sort_alpha;
    for (var i = 0; i < table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text != '') {
        if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
          return sorttable.sort_numeric;
        }
        possdate = text.match(sorttable.DATE_RE)
        if (possdate) {
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            return sorttable.sort_ddmm;
          } elseif (second > 12) {
            return sorttable.sort_mmdd;
          } else {
            sortfn = sorttable.sort_ddmm;
          }
        }
      }
    }
    return sortfn;
  },
  getInnerText: function(node) {
    if (!node) return"";
    hasInputs = (typeof node.getElementsByTagName == 'function') &&
      node.getElementsByTagName('input').length;
    if (node.getAttribute("sorttable_customkey") != null) {
      return node.getAttribute("sorttable_customkey");
    } elseif (typeof node.textContent != 'undefined' && !hasInputs) {
      return node.textContent.replace(/^\s+|\s+$/g, '');
    } elseif (typeof node.innerText != 'undefined' && !hasInputs) {
      return node.innerText.replace(/^\s+|\s+$/g, '');
    } elseif (typeof node.text != 'undefined' && !hasInputs) {
      return node.text.replace(/^\s+|\s+$/g, '');
    } else {
      switch (node.nodeType) {
        case3:
          if (node.nodeName.toLowerCase() == 'input') {
            return node.value.replace(/^\s+|\s+$/g, '');
          }
        case4:
          return node.nodeValue.replace(/^\s+|\s+$/g, '');
          break;
        case1:
        case11:
          var innerText = '';
          for (var i = 0; i < node.childNodes.length; i++) {
            innerText += sorttable.getInnerText(node.childNodes[i]);
          }
          return innerText.replace(/^\s+|\s+$/g, '');
          break;
        default:
          return'';
      }
    }
  },
  reverse: function(tbody) {
    // reverse the rows in a tbody
    newrows = [];
    for (var i = 0; i < tbody.rows.length; i++) {
      newrows[newrows.length] = tbody.rows[i];
    }
    for (var i = newrows.length - 1; i >= 0; i--) {
      tbody.appendChild(newrows[i]);
    }
    delete newrows;
  },
  sort_numeric: function(a, b) {
    aa = parseFloat(a[0].replace(/[^0-9.-]/g, ''));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(b[0].replace(/[^0-9.-]/g, ''));
    if (isNaN(bb)) bb = 0;
    return aa - bb;
  },
  sort_alpha: function(a, b) {
    if (a[0] == b[0]) return0;
    if (a[0] < b[0]) return -1;
    return1;
  },
  sort_ddmm: function(a, b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3];
    m = mtch[2];
    d = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt1 = y + m + d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3];
    m = mtch[2];
    d = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt2 = y + m + d;
    if (dt1 == dt2) return0;
    if (dt1 < dt2) return -1;
    return1;
  },
  sort_mmdd: function(a, b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3];
    d = mtch[2];
    m = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt1 = y + m + d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3];
    d = mtch[2];
    m = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt2 = y + m + d;
    if (dt1 == dt2) return0;
    if (dt1 < dt2) return -1;
    return1;
  },
  shaker_sort: function(list, comp_func) {
    var b = 0;
    var t = list.length - 1;
    var swap = true;
    while (swap) {
      swap = false;
      for (var i = b; i < t; ++i) {
        if (comp_func(list[i], list[i + 1]) > 0) {
          var q = list[i];
          list[i] = list[i + 1];
          list[i + 1] = q;
          swap = true;
        }
      }
      t--;

      if (!swap) break;

      for (var i = t; i > b; --i) {
        if (comp_func(list[i], list[i - 1]) < 0) {
          var q = list[i];
          list[i] = list[i - 1];
          list[i - 1] = q;
          swap = true;
        }
      }
      b++;

    }
  }
}
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", sorttable.init, false);
}
/* for Internet Explorer *//*@cc_on @*//*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*//* for Safari */if (/WebKit/i.test(navigator.userAgent)) { // sniffvar _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      sorttable.init(); // call the onload handler
    }
  }, 10);
}
/* for other browsers */window.onload = sorttable.init;

functiondean_addEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else {
    if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
    if (!element.events) element.events = {};
    var handlers = element.events[type];
    if (!handlers) {
      handlers = element.events[type] = {};
      if (element["on" + type]) {
        handlers[0] = element["on" + type];
      }
    }
    handlers[handler.$$guid] = handler;
    element["on" + type] = handleEvent;
  }
};
dean_addEvent.guid = 1;

functionremoveEvent(element, type, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
  } else {
    if (element.events && element.events[type]) {
      delete element.events[type][handler.$$guid];
    }
  }
};

functionhandleEvent(event) {
  var returnValue = true;
  event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
  var handlers = this.events[event.type];
  for (var i in handlers) {
    this.$$handleEvent = handlers[i];
    if (this.$$handleEvent(event) === false) {
      returnValue = false;
    }
  }
  return returnValue;
};

functionfixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
}
if (!Array.forEach) {
  Array.forEach = function(array, block, context) {
    for (var i = 0; i < array.length; i++) {
      block.call(context, array[i], i, array);
    }
  };
}
Function.prototype.forEach = function(object, block, context) {
  for (var key in object) {
    if (typeofthis.prototype[key] == "undefined") {
      block.call(context, object[key], key, object);
    }
  }
};
String.forEach = function(string, block, context) {
  Array.forEach(string.split(""), function(chr, index) {
    block.call(context, chr, index, string);
  });
};
var forEach = function(object, block, context) {
  if (object) {
    var resolve = Object;
    if (object instanceofFunction) {
      resolve = Function;
    } elseif (object.forEachinstanceofFunction) {
      object.forEach(block, context);
      return;
    } elseif (typeof object == "string") {
      resolve = String;
    } elseif (typeof object.length == "number") {
      resolve = Array;
    }
    resolve.forEach(object, block, context);
  }
}

table.sortablethead {
  background-color: #eee;
  color: #666666;
  font-weight: bold;
  cursor: default;
}

<tableclass="sortable"><thead><tr><th>S.L.</th><th>name</th><th>Goal</th></tr></thead><tbody><tr><td>1</td><td>Ronaldo</td><td>120</td></tr><tr><td>2</td><td>Messi</td><td>66</td></tr><tr><td>3</td><td>Ribery</td><td>10</td></tr><tr><td>4</td><td>Bale</td><td>22</td></tr></tbody></table>

JS is used here without any other JQuery Plugin.

Solution 5:

You can use jQuery DataTables plugin for applying column sorting in desired way.

Column Sorting using DataTable

Share

Top Question

Function To Be Called Once Div Hits Top Of Viewport Window

Wondering if you could have a look at the below code. Im wa…

Webrtc Video Constraints Not Working

I'm trying to get a lower resolution from the webcam na…

Multiple Flexboxes With Margin-right, Except The Last One In The Row? Without JS?

See the following image: Current setup is at top-left. If …

Problem In Getting Right Result For Select Box

i am using Jquery as: $(document).ready(function(){ test(&…

IE7 Is Clipping My Text. How Do I Adjust Its Attitude?

A few days ago I re-skinned my website. Development of this…

@font-face Behavior Inconsistencies Inside Of @media Query Rules (ie9)

The current behavior in Chrome, Firefox and Safari when it …

Only Let Certain Inner Divs Control Outer Div's Width

I have the follow html structure: …

Transparency Of A Filled Stroke In HTML5

I'm working on a doodling app in HTML5 and I would like…

Click Ignored: Issue With Label Elements To Associate With Form Controls

I have associated the label element to form fields using &#…

How Do I Search Nested Divs Using Regex For Class Names

I want to search for nested divs like these in my DOM …

• September 2024 (10)
• August 2024 (214)
• July 2024 (190)
• June 2024 (407)
• May 2024 (690)
• April 2024 (441)
• March 2024 (796)
• February 2024 (817)
• January 2024 (803)
• December 2023 (837)
• November 2023 (355)
• October 2023 (585)
• September 2023 (264)
• August 2023 (321)
• July 2023 (262)
• June 2023 (350)
• May 2023 (210)
• April 2023 (146)
• March 2023 (139)
• February 2023 (178)
• January 2023 (257)
• December 2022 (130)
• November 2022 (157)
• October 2022 (181)
• September 2022 (162)
• August 2022 (298)
• July 2022 (90)

Menu Halaman Statis

• Beranda

© 2022 - Html5 Manual

S.L.	name