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 src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<table class="jAccordionTable table table-hover" data-page-size="6" data-page-navigation=".pagination" data-limit-navigation="5">
        <thead>
        <tr>
          <th data-sort="int">ID</th>
          <th data-sort="string">Alphabet</th>
          <th data-sort="string">City</th>
          <th data-sort="string">State</th>
        </tr>
        </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Zulu</td>
      <td>Raleigh</td>
      <td>North Carolina</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...111...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>2</td>
      <td>Yankee</td>
      <td>Detroit</td>
      <td>Michigan</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...222...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>3</td>
      <td>Xray</td>
      <td>Omaha</td>
      <td>Nebraska</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...333...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>4</td>
      <td>Whiskey</td>
      <td>New York</td>
      <td>New York</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...444...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>5</td>
      <td>Victor</td>
      <td>Savannah</td>
      <td>Georgia</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...555...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>6</td>
      <td>Uniform</td>
      <td>Hartford</td>
      <td>Connecticut</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...666...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>7</td>
      <td>Tango</td>
      <td>Seattle</td>
      <td>Washington</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...777...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>8</td>
      <td>Sierra</td>
      <td>Albuquerque</td>
      <td>New Maxico</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...888...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>9</td>
      <td>Romeo</td>
      <td>San Diego</td>
      <td>California</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...999...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>10</td>
      <td>Charlie</td>
      <td>Zagreb</td>
      <td>Croatia</td>
    </tr>
    <tr class="collapse">
      <td colspan="4">...999...</td>
    </tr>
  </tbody>
​
  <tfoot class="hide-if-no-paging">
        <tr>
          <td colspan="6" class="text-center">
            <div class="pagination">@pagination</div>
          </td>
        </tr>
  </tfoot>
​
  </table> 
</body>
</html>
 
.table {width:100%; font-family:sans-serif; border-collapse:collapse; border:1px solid #d2d2d2;}
.table th { text-align:left; padding:4px 8px; font-size:90%; }
.table td { border-top:1px solid #d2d2d2; padding:4px 8px;}
.table tr:hover td {cursor:pointer; background:#f8f8f8;}
.collapse {display:none;}
 
function accordionTable(i,elem) {
  var table = $(elem),
      tbody = table.find('tbody'),
      th_index = 0,
      th_sortType = "string";
​
  //accordion on tbody > tr
  tbody.find('tr:first').addClass('table-acc-header');
  tbody.find('tr:last').addClass('table-acc-body');  
  $('.table-acc-header').click(function() {
    table.find('.table-acc-body').addClass('collapse');
    $(this).next('.table-acc-body').removeClass('collapse');
  });
​
  function mapTDs(i, elem){
    var txt = $("td", elem).eq(th_index).text();
    $(elem).attr("data-sortval", txt);
  }
  function sortAsc(a, b){
    var aData = $(a).attr("data-sortval"),
        bData = $(b).attr("data-sortval");
    if(th_sortType==="int"){ 
      return +bData < +aData ? 1 : -1; // Integer
    }else{   
      return  bData <  aData ? 1 : -1; // String or else
    }
  }
  
  //header sort
  table.on("click", "th", function() {
    th_sortType = $(this).data('sort');
    th_index = $(this).index();
    tbody = table.find('tbody').each(mapTDs);
    tbody.sort(sortAsc).detach().appendTo(table);
  });
}
​
$('.jAccordionTable').each(accordionTable);
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers