Tablesorter不工作，尝试了现有的解决方案

Question

我在实施Tablesorter 2.0时遇到了麻烦。我希望使用此库对表进行排序，如果可能的话，使用小部件进行过滤。以下是我的代码

JavaScript：我的包含库

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="javascripts/jquery.tablesorter.min.js"></script>                
<script type="text/javascript" src="javascripts/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
    j(document).ready(function () {
        j('#course_table').tablesorter({
                       widthFixed: true,
                       widgets: ['filter'],
                       ignoreCase: false
                });
        });
</script>

HTML：我的表体完全被添加为来自servlet的动态构建的字符串但是根本不起作用所以我降级为在JSP中构建它。

<table  class="tablesorter CourseSelector_table search-table" id="course_table" cellpadding="0" cellspacing="0">    
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th title="Click to Sort by Course">Course</th>
                                <th title="Click to Sort by Course Title">Course Title</th>
                                <th title="Click to Sort by Credits">Credits</th>
                                <th title="Click to Sort by Effective Term">Effective Term</th>
                                <th title="Click to Sort by Goal 1">Goal 1</th>
                                <th title="Click to Sort by Goal 2">Goal 2</th>
                                <th title="Click to Sort by Goal 3">Goal 3</th>
                                <th title="Click to Sort by Goal 4">Goal 4</th>
                                <th title="Click to Sort by Goal 5">Goal 5</th>
                                <th title="Click to Sort by Goal 6">Goal 6</th>
                                <th title="Click to Sort by Goal 7">Goal 7</th>
                                <th title="Click to Sort by Goal 8">Goal 8</th>
                                <th title="Click to Sort by Goal 9">Goal 9</th>
                                <th title="Click to Sort by Goal 10">Goal 10</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${courses}" var="row">
                                <tr id="${row.courseID}" onclick="GETemplate.addCourse(${row.courseID});
                                        changeRow(this);">
                                    <td><input type = "checkbox" id="${row.courseSubject}${row.catalogNumber}"
                                               onchange="selectClassToAdd(this)" value="${row.courseID}"</td>
                                    <td><label for="${row.courseID}">
                                            ${row.courseSubject}
                                            <br>
                                            ${row.catalogNumber}
                                        </label></td>
                                    <td><label  for="${row.courseID}">${row.courseName}</label></td>
                                    <td>${row.credits}</td>
                                    <td><label id="${row.courseName}"/></td>
                                    <td>${row.points[1]}</td>
                                    <td>${row.points[2]}</td>
                                    <td>${row.points[3]}</td>
                                    <td>${row.points[4]}</td>
                                    <td>${row.points[5]}</td>
                                    <td>${row.points[6]}</td>
                                    <td>${row.points[7]}</td>
                                    <td>${row.points[8]}</td>
                                    <td>${row.points[9]}</td>
                                    <td>${row.points[10]}</td>                            
                                </tr>
                            <script>
                                var termName = "";
                                switch ('${row.effectiveTerm}' % 10) {
                                    case 2:
                                        termName = "Spring";
                                        break;
                                    case 4:
                                        termName = "Summer";
                                        break;
                                    case 6:
                                        termName = "Fall";
                                        break;
                                    case 8:
                                        termName = "Winter";
                                        break;
                                }
                                var term = Math.floor('${row.effectiveTerm}' / 10);
                                var year = 2000 + term % 100;
                                document.getElementById("${row.courseName}").innerHTML = termName + "<br>" + year;
                                document.getElementById("${row.courseID}").className = ("content" + " " + '${row.courseSubject}' + " " + termName + " " + year + " " + "obj_row_item");
                            </script>
                        </c:forEach>
                        <%--${courseSelectorTable}--%>
                        </tbody>
                    </table>