Editable Refresh Issue

by Herst

HTML

<link rel="stylesheet" href="http://mottie.github.io/tablesorter/dist/css/theme.default.min.css">
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-editable.js"></script>
<table id="table" class="tablesorter">
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button type="button" id="btnLoad">Load Data</button>

CSS

/* make all calculated values bold */
	.tablesorter tbody td[data-math] {
	    font-weight: bold;
	}
	/* darken first & last column */
	.tablesorter tbody th, .tablesorter tbody tr td.totals {
	    font-family:'trebuchet ms', verdana, arial;
	    font-size: 13px;
	    font-weight: normal;
	    background-color: #ddd;
	    text-shadow: none;
	}
	/* even darker tbody info row & tfoot */
	.tablesorter tbody.tablesorter-infoOnly th, .tablesorter tfoot th, .tablesorter tfoot th.tablesorter-headerAsc, .tablesorter tfoot th.tablesorter-headerDesc {
	    background-color: #aaa;
	    font-family:'trebuchet ms', verdana, arial;
	    font-size: 13px;
	    font-weight: bold;
	    background-color: #aaa;
	    text-shadow: none;
	}
	/* align decimals in Grand Total column */
	.align-decimal {
	    width: 100px;
	    display: inline-block;
	    text-align: right;
	}

JavaScript

$('#table').tablesorter({
    //delayInit: true,
    widgets: ['zebra', 'editable']
});

$('#btnLoad').click(function () {
    var $tblBody = $("#table tbody");

    $tblBody.empty();

    for (var i = 0; i < 10; ++i) {
        $("<tr></tr>")
            .append("<td>" + i + "</td><td>" + i + (i % 3) + "</td>")
            .appendTo($tblBody);
    }

    $("#table1").trigger("update");
});