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 id='controls'>
        <th id="facility_header1">Table Header 1<br /></th>
        <th id="facility_header2">Table Header 2<br /></th>
        <th id="facility_header3">Table Header 3<br /></th>
        <th id="facility_header4">Table Header 4<br /></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');
​
  //This function returns another function which is a click handler. 
  //It takes the sort function as a parameter.
  //Declared here so that $table is defined.
  function createClickHandler(column, isAscending){
    return function(e){
      table.find('td')
        .filter(function(){
          return $(this).index() === column;
        })
        .sort(function(a, b){
          var order = $.text([a]) > $.text([b]);
          return isAscending ? order : !order;
        }, function(){
          // parentNode is the element we want to move
          return this.parentNode; 
        })
      ;
    };
  }
  
  $('#controls th').each(function(column,item){
    //Note we get the column index for for free with the each function
    $(this)
      .append($('<a title="sort this column" href="#">Ascending</a>')
        .click(createClickHandler(column, true))
      )
      .append('&nbsp;&nbsp;')
      .append($('<a title="sort this column" href="#">Decending</a>')
        .click(createClickHandler(column, false))
      )
      ;
  });
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers