SortTableJS在JSP中不起作用

时间:2018-07-27 12:24:08

标签: javascript html sorttable.js

我正在开发一个网站,以显示必须由用户需求订购的数据。而且我不知道如何解决我的问题。我已经完成了here中描述的所有操作。但是最后,当我在浏览器中运行它时,它不起作用。

这只是获取数据并返回编辑器视图的表的ajax代码:

    try { 
            /*
                Making call to database 
                and getting all the data
            */

            int count = metaData.getColumnCount();
    %>

                <table id="table" class="sortable table table-hover table-mc-light-blue">
                    <thead>
                        <tr>
                            <% 
                                for(int i=1; i<=count; i++){
                                    %><th scope="col" class="mdl-data-table__cell--non-numeric"><%
                                        out.print(metaData.getColumnName(i));
                                    %></th><%
                                }
                            %>
                        </tr>
                    </thead>

                    <tbody>
                        <%
                            while(resultSet.next()){%>
                            <tr onclick="rowClickable(this)" class="n_title">
                                   <%for(int i= 1; i<= count; i++){
                                        if(metaData.getColumnName(i).equals("PLANT")){
                                            %><td scope="row" id="clicked"><%
                                                out.println("<a class='disabledLink' href='"+resultSet.getString(i)+"'>");
                                                    out.println(resultSet.getString(i));
                                                out.println("</a>");
                                            %></td><%
                                        } else {
                                            %><td><%
                                                out.println(resultSet.getString(i));
                                            %></td><%
                                        }
                                    }%>
                            </tr>
                            <%}
                        %>                
                    </tbody>
                    <tfoot></tfoot>
                </table>
<script src="sorttable.js" type="text/javascript"></script>
    <%      connection.close();
        } 
        catch(Exception e){
            out.println("\n<P> SQL error: <PRE> " + e + " </PRE> </P>\n ");
        }
    %>

这是浏览器代码的视图:

<table id="table" class="sortable table table-hover table-mc-light-blue">
                <thead>
                    <tr>
                        <th scope="col" class="mdl-data-table__cell--non-numeric">PLANT</th><th scope="col" class="mdl-data-table__cell--non-numeric">NAME</th><th scope="col" class="mdl-data-table__cell--non-numeric">COUNT</th>
                    </tr>
                </thead>

                <tbody>

                        <tr onclick="rowClickable(this)" class="n_title">
                               <td scope="row" id="clicked"><a class='disabledLink' href='ABI'>
ABI
</a>
</td></tr>

            </tbody>
            <tfoot></tfoot>
        </table>

    <script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
    <script src="js/plugins/material.js" type="text/javascript"></script>
    <script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
    <script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="js/plugins/bootstrap.js" type="text/javascript"></script>
    <script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>

    <script src="../js/created/main.js" type="text/javascript"></script>

这是我的 index.html 页面,所有数据都放入其中:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="css/created/styles.css" rel="stylesheet" type="text/css"/>

        <link href="css/plugins/bootstrap-grid.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/bootstrap-grid.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/bootstrap-reboot.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/material.css" rel="stylesheet" type="text/css"/>    
    </head>
    <body>
        <nav id="navbar">  
            <button id="hiddenBackButton" type="button">Back</button>
            <div id="searchNav">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" id="search" onkeyup="searchFunction('#switch-1',this.value, 'table', 'search')" type="text">
                  <label class="mdl-textfield__label" id="searchLabel" for="sample3" style="margin-bottom: 0.0px">Search by Name</label>
                </div>  
                <div style="width: 10%; display: inline-block;">
                    <span style="
                        cursor: default;
                        font-size: 16px;
                        line-height: 24px;
                        margin: 0;
                        left: 24px">Plant
                    </span>
                    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
                        <input onclick="changeSearchText(this)" type="checkbox" id="switch-1" class="mdl-switch__input">                        
                    </label>
                    <span style="
                        cursor: default;
                        font-size: 16px;
                        line-height: 24px;
                        margin: 0">Name
                    </span>
                </div> 
            </div>
        </nav>       


        <main id="response_body">
            <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
        </main>

        <script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
        <script src="js/plugins/material.js" type="text/javascript"></script>
        <script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
        <script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
        <script src="js/plugins/bootstrap.js" type="text/javascript"></script>
        <script src="js/plugins/bootstrap.min.js" type="text/javascript"></script> 
        <script src="sorttable.js" type="text/javascript"></script>

        <script src="js/created/main.js" type="text/javascript"></script>   

        <script>            
            window.onload = loadDataAjax("response_body");              
        </script>
    </body>       
</html>

我希望我的代码不会太混乱或至少不易读。如果有人能够解决我的问题,那就太好了。预先感谢

1 个答案:

答案 0 :(得分:0)

通过在创建表的函数之后添加以下代码来解决该问题:

$.getScript('url/to/script');

但是here可以更好地描述此代码。