Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <table border="1">
    <tr>
        <th id="facility_header">Name</th>
        <th>Numbers 1</th>
        <th id="city_header">City</th>
        <th>Numbers 2</th>
    </tr>
    <tr>
        <th id="facility_header1">
            Table Header 1<br />
            <a href="#" class="accending">Accending</a>&nbsp;&nbsp;<a href="#" class="decending">Decending</a>
        </th>
         <th id="facility_header2">
            Table Header 2<br />
            <a href="#" class="accending">Accending</a>&nbsp;&nbsp;<a href="#" class="decending">Decending</a>        </th>
         <th id="facility_header3">
            Table Header 3<br />
            <a href="#" class="accending">Accending</a>&nbsp;&nbsp;<a href="#" class="decending">Decending</a>
        </th>
         <th id="facility_header4">
            Table Header 4 <br />
            <a href="#" class="accending">Accending</a>&nbsp;&nbsp;<a href="#" class="decending">Decending</a>
        </th>
    </tr>
    <tr>
        <td>C</td>
        <td>111</td>
        <td>Amsterdam</td>
        <td>1234</td>
    </tr>
    <tr>
        <td>B</td>
        <td>222</td>
        <td>London</td>
        <td>123</td>
    </tr>
    <tr>
        <td>A</td>
        <td>333</td>
        <td>Paris</td>
        <td>324</td>
    </tr>
</table>
</body>
</html>
 
// sort. Ignore this script.
/* jQuery.fn.sort
 * --------------
 * @author James Padolsey (http://james.padolsey.com)
 * @version 0.1
 * @updated 18-MAR-2010
 * --------------
 */                           
jQuery.fn.sort = (function(){    
    var sort = [].sort;
    return function(comparator, getSortable) {
        getSortable = getSortable || function(){return this;};
        var placements = this.map(function(){
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
            
            return function() {
                
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
                
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
                
            };
            
        });
       
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
        
    };
    
})();
​
// real scripts comes here.
​
​
$(document).ready(function(){
  var table = $('table');
  $('.accending, .accending')
    .wrapInner('<span title="sort this column"/>')
    .click(function(e){
      console.log("click");
      var th = $(this).closest('th'),
        thIndex = th.index();
      table.find('td')
        .filter(function(){
          return $(this).index() === thIndex;
        })
        .sort(
          function(a, b){
            return $.text([a]) > $.text([b]);
          }, function(){
            // parentNode is the element we want to move
            return this.parentNode; 
          }
        );
    });
  $('.decending, .decending')
    .wrapInner('<span title="sort this column"/>')
    .click(function(e){
      e.preventDefault();
      var th = $(this).closest('th'),
        thIndex = th.index();
      table.find('td')
        .filter(function(){
          return $(this).index() === thIndex;
        })
        .sort(
          function(a, b){
            return $.text([a]) < $.text([b]);
          }, function(){
            // parentNode is the element we want to move
            return this.parentNode; 
          }
        );
    });
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers