JSFiddle - React, Tailwind, and code Playground

by houmie

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table id="tab_open_deals" class="tablesorter table tablesorter-bootstrap">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
        <td><span class="badge">AAA 0%</span></td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td><span class="badge">AAA 20%</span></td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
  <tr class="test">
    <td><span class="badge">AAA 10%</span></td>
    <td>1002.00</td>
    <td>3 Jan 2013 </td>
  </tr>
 </tbody>
</table>

CSS

.cb_inline_block {
    display:inline-block;
}



table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
      background-color: #cfe2e8;  
}


table.sub_table-hover tbody tr:hover td,
table.sub_table-hover tbody tr:hover th{
      background-color: #cfe2e8;  
}

JavaScript

$(function() { 
 
  $.extend($.tablesorter.themes.bootstrap, { 
    // these classes are added to the table. To see other table classes available, 
    // look here: http://twitter.github.com/bootstrap/base-css.html#tables 
    table      : 'table', 
    header     : 'bootstrap-header', // give the header a gradient background 
    footerRow  : '', 
    footerCells: '', 
    icons      : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header 
    sortNone   : 'bootstrap-icon-unsorted', 
    sortAsc    : 'icon-chevron-up', 
    sortDesc   : 'icon-chevron-down', 
    active     : '', // applied when column is sorted 
    hover      : '', // use custom css here - bootstrap class may not override it 
    filterRow  : '', // filter row class 
    even       : '', // odd row zebra striping 
    odd        : ''  // even row zebra striping 
  }); 
 
  // call the tablesorter plugin and apply the uitheme widget 
  $("#tab_open_deals").tablesorter({ 
    theme : "bootstrap", // this will  
 
    widthFixed: true, 
 
    headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon! 
 
    // widget code contained in the jquery.tablesorter.widgets.js file 
    // use the zebra stripe widget if you plan on hiding any rows (filter widget) 
    widgets : [ "uitheme", "filter", "zebra" ], 
 
    widgetOptions : { 
      // using the default zebra striping class name, so it actually isn't included in the theme variable above 
      // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden 
      zebra : ["even", "odd"], 
 
      // reset filters button 
      filter_reset : ".reset", 
 
      // set the uitheme widget to use the bootstrap theme class names 
      // uitheme : "bootstrap" 
 
    } 
  }) 
  .tablesorterPager({ 
 
    // target the pager markup - see the HTML block below 
    container: $(".pager"), 
 
    // target the pager page select dropdown - choose a...