JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table class="tablesorter bbb">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
            <th>Erstelldatum</th>
            <th>Bestelltermin</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#" class="toggle"><img src="/components/com_order/images/right.gif" /></a>
            </td>
            <td>90</td>
            <td>Powerplane_S</td>
            <td>01.11.2013</td>
            <td class="iconCell">01.11.2013 <a href="/bestellungen?task=deleteProcess&amp;processID=90" class="delete hover">
    
   </a>
 <a href="/bestellungen?task=editProcess&amp;processID=90" class="hover" style="margin-right:5px;">
    
   </a>

            </td>
        </tr>
        <tr class="expand-child">
            <td colspan="2">
                <input type="hidden" name="supplierID" value="1" />
            </td>
            <td colspan="3">
                <img src="/components/com_order/images/right.gif" />farnell</td>
        </tr>
        <tr class="tabledata expand-child expand-child-child">
            <td colspan="5">
                <input type="hidden" name="processID" value="90" />
                <input type="hidden" name="supplierID" value="1" />
                <div>
                    <table class="tablesorter">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Bestellnummer</th>
                                <th>Name</th>
                                <th>Kommentar</th>
                                <th>Menge</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1665</td>
           ...

CSS

/* tables */
 table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(../images/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    /*vertical-align: top;*/
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(../images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

JavaScript

(function ($) {
    $(document).ready(function () {


        $(".tablesorter:not(.tabledata table)").tablesorter({
            cssChildRow: 'expand-child'
        })
            .tablesorterPager({
            container: $("#pager"),
            removeRows: false
        })
            .bind('pagerChange pagerComplete', function () {
            // hide child rows after pager update
            $('.expand-child').hide();
        });


        $('.tablesorter').delegate('tr:not(.expand-child)', 'click', 'click', function () {

            $(this).closest('tr').nextUntil('tr:not(.expand-child)').not('.expand-child-child:hidden').toggle();

            return false;
        });

        $('.tablesorter').delegate('tr.expand-child:not(.expand-child-child)', 'click', function () {

            $(this).closest('tr').next().toggle();

            return false;
        });

        $('.expand-child').hide();
    });
})(jQuery);