Question

我正在创建一个需要执行以下操作的Web应用程序。 1）在index.html中，它分为div。其中一个div用于导航，另一个div显示用户所需的数据，具体取决于他在导航中点击的内容。它可以是从服务器导入的表或图形。

2）从服务器导入的示例内容如下所示。显然它是一个表，但它需要javascript才能进行排序。

<table id="myTable" class="tablesorter">  <thead>  <tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th>  </tr>  </thead>  <tbody>  <tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td>  </tr>  <tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td>  </tr>  <tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td>  </tr>  <tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td>  </tr>  </tbody>  </table>

问题是如果我单击导航区域中的表格按钮，它会显示表格，但它没有排序。您可以在http://tablesorter.com/docs/#Demo中看到我希望在此处执行的表的正确行为。

有人能告诉我这段代码有什么问题吗？我需要做什么：

客户页面

<html>
<script type="text/javascript" src="static/path/to/widget-scroller.js"></script>       <script type="text/javascript" src="static/path/to/jquery-latest.js"></script>   
<script type="text/javascript" src="static/path/to/jquery.tablesorter.js"></script>     
<script type="text/javascript" src="static/path/to/jquery.tablesorter.widgets.js"></script>

    <script>    
       function loadTable(logtype) {
       var xmlhttp;         
       if (window.XMLHttpRequest)   {
       // code for IE7+, Firefox, Chrome, Opera, Safari             
          xmlhttp=new XMLHttpRequest();         
       }        
       else
       {
       // code for IE6, IE5             
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");       
        }

       xmlhttp.onreadystatechange=function() {          
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               document.getElementById("contents").innerHTML=xmlhttp.responseText;
            }
       }

       if (logtype == "Option1") {
          xmlhttp.open("GET","/Option1",true); 
          }
       else if (logtype == "Option2"){
          xmlhttp.open("GET","/Option2",true);
          }

          xmlhttp.send();   
         } 

       </script> 


   <body> 
  <div id="alldiv">

        <!--Banner Div-->       <div id="bannertable">
                    BANNER


                            </div>

        <div id = "container" >         <table id="holder">             <tr id="tr1">
                    <td id ="td1">
                        <div id = "nav">
                            <a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">   Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Show All</a>
                            <ul id="treemenu1" class="treeview">
                                <li>System
                                    <ul>
                                        <li>Monitoring</li>
                                    </ul>
                            >                                           <li><a href="#" onClick="loadTable('Option1')">Option1</a></li>
                                                <li><a href="#" onClick="loadTable('Option2')">Option2</a></li>

                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                            <script type="text/javascript">
                                ddtreemenu.createTree("treemenu1", true)
                            </script>
                        </div>
                    </td>
                    <td id = "td2">
                        <div id = "contents" class="contentdata">
                            tables
                        </div>
                    </td>           </tr>       </table>    </div> </div> 
</body> </html>

请注意，如果表格分类器位于带有html标签的完全不同的页面上，则表格分类器可以正常运行，这告诉我这些表格代码没有任何问题。

我想知道如果我重新加载表所需的js文件，它会正常运行吗？对这种情况有什么最好的解释和解决方案。谢谢。

Answer 1

我终于得到了这个问题的答案。

我做了什么：

将服务器发送的任何数据放入变量中。并执行以下操作

var data_from_server = xmlhttp.responseText;
$(#ID_OF_DIV).html(data_from_server);

然后用javascript解决问题，在服务器所需的数据中包含你需要的JS文件的脚本标签，例如：

假设这是您将从服务器收到的数据：

<table id="myTable" class="tablesorter">  <thead>  <tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th>  </tr>  </thead>  <tbody>  <tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td>  </tr  </tbody>  </table>

包含此表所需的脚本标记，因此在这种情况下，请包含以下2：

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>  
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

您也可以查看reload javascript in a page once the content in the div is changed以获取其他答案。

从服务器导入的数据不能使用/访问嵌入在html文件中的javascript函数

1 个答案: