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(){
​
    console.log("select table");
    var table = $('table');
    console.log(table);
    $('th')
        .wrapInner('<span title="sort this column"/>')
        .each(function(){
            console.log("ad", $(this), $(this).text());
            var th = $(this),
                thIndex = th.index(),
                inverse = false;
            console.log(thIndex);
            $('.accending, .accending', this).click(
              function(e){
                table.find('td').filter(function(){
                   // console.log( $(this).index(),  $(this).text() );  
                    return $(this).index() === thIndex;
                }).sort(function(a, b){
                    return $.text([a]) > $.text([b]) 
                        inverse ? -1 : 1
                       ;
                }, function(){
                    // parentNode is the element we want to move
                    return this.parentNode; 
                });
                inverse = !inverse;
             }); 
    $('.decending, .decending', this).click(function(e){
             e.preventDefault();                        
                table.find('td').filter(function(){
                                                
                    return $(this).index() === thIndex;
                }).sort(function(a, b){
                    return $.text([a]) < $.text([b]) 
                        inverse ? 1 : -1       ;
                }, function(){
                    // parentNode is the element we want to move
                    return this.parentNode; 
                });
                inverse = !inverse;     
            }); 
        });
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers