tablesorter themes not working

1.4k views Asked by At

My code all works except the theme instructions to tablesorter. I have put the themes in a CSS folder inside the tablesorter js. I appreciate your help if you can help me. Here is my code:

<table id="dtTable" class="table table-bordered table-responsive">
    <thead>
        <tr>
            <th align="center">#</th>
            <th>Desc</th>
            <th colspan="2" align="center">Action</th>
        </tr>
    </thead>
    <tbody>
        <?php $query="SELECT * FROM eth" ; $records_per_page=10; $newquery=$ eth->paging($query,$records_per_page); $eth->dataview($newquery); ?>
        <tbody class "do-not-sort tablesorter-no-sort">
            <tr>
                <td colspan="7" align="center">
                    <div class="pagination-wrap">
                        <?php $eth->paginglink($query,$records_per_page); ?></div>
                </td>
            </tr>
        </tbody>
    </tbody>
</table>
<script type="text/javascript">
    $(function() {

        $("#dtTable").tablesorter()
        selectorSort: "th, td"
        selectorRemove: "tr.do-not-sort"
        theme: "jui"
    });
</script>

Thank you

1

There are 1 answers

0
Mottie On

When using Bootstrap or jQuery UI styling, you'll need the "uitheme" widget to manage the class names (demo).

Page Header

<!-- ui theme stylesheet - contents shown below -->
<link rel="stylesheet" href="../css/theme.jui.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="css/jquery-ui.min.css">

<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

Script

$(function () {
    $('table').tablesorter({
        theme: 'jui',
        headerTemplate: '{content}{icon}',
        widgets: ['zebra', 'uitheme']
    });
});

The "uitheme" widget is contained in the jquery.tablesorter.widgets.js file and needs to be included in the widgets option along with an {icon} pattern in the headerTemplate.