2016-04-28 60 views
2

首先,我很抱歉,因为我知道人们之前有过这个问题,并已多次回答。 我很抱歉地说,我不明白已经给出的答案,因此需要就我的特定问题寻求建议。datatables分页正在破坏工作中的脚本代码

我正在使用最新的jQuery和dataTables库,并可以通过经典的ASP来获取我的数据。

问题发生在页面1后的所有页面上(禁用分页使所有工作都不是理想的结果)。

我明白dataTables的工作方式是通过与DOM中的tr和我读过的其他帖子混淆,使用.on可以解决这个问题,但这是我要去的地方。

我的代码看起来是这样的(我有这个页面上有多个标签表,因此具有对话框按钮将数据复制到在表单中输入并提交)

<script> 
$().ready(function(){ 
    $("#table1").dataTable(); 
}); 
    </script> 
      <table id="table1"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Access Level</th> 
         <th>Last Edited</th> 
         <th>Last Edited By</th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        <% 
SQL="SELECT * FROM People_Levels ORDER BY accessLevel ASC, fName ASC;" 
set rs=MyConn.execute(SQL) 
set SQL=nothing 
do While not rs.EOF 
        %> 
        <tr> 
         <td><%=rs("fName")%>&nbsp;<%=rs("sName")%></td> 
         <td>Access Level <%=rs("accessLevel")%></td> 
         <td><%=rs("lastEdited")%></td> 
         <td><%=rs("lastEditedBy")%></td> 
         <td><span id='<%=rs("Key")%>'>Remove</span> 
          <div id="remove<%=rs("Key")%>" title="remove user access level"> 
           <div id="remove<%=rs("Key")%>content"> 
            Are you sure you want to remove <%=rs("fName")%>&nbsp;<%=rs("sName")%> from the access level list? 
           </div> 
           <div id="remove<%=rs("Key")%>saving" style="text-align: center; display: none"> 
            <strong style="color: green; font-size: 1em">Removing user from database</strong><br /> 
            <img src="CSS/images/Loading.gif" /> 
           </div> 
          </div> 
          <script> 
$().ready(function() { 
    $("#remove<%=rs("Key")%>").dialog({ 
     autoOpen: false, 
     height: 250, 
     width: 300, 
     modal: true, 
     buttons: { 
      "No": function() { 
       $(this).dialog("close"); 
      }, 
      "Yes": function() { 
       $("#select1").val("2"); 
       $("#select2").val(<%=rs("Key")%>); 
       $("#submit").trigger("click"); 
       $("#remove<%=rs("Key")%>content").hide(); 
       $("#remove<%=rs("Key")%>saving").show(); 
      } 
     } 
    }); 
    $("#<%=rs("Key")%>").click(function(){ 
     $("#remove<%=rs("Key")%>").dialog("open"); 
    }); 
}); 
          </script> 
         </td> 
        </tr> 
        <% 
rs.MoveNext 
loop 
set rs=nothing 
        %> 
       </tbody> 
      </table> 
    <form action="" method="post"> 
     <input id="submit" type="submit" name="submit" style="display: none" /> 
     <input id="select1" name="select1" style="display: none" /> 
     <input id="select2" name="select2" style="display: none" /> 
     <input id="select3" name="select3" style="display: none" /> 
     <input id="select4" name="select4" style="display: none" /> 
     <input id="select5" name="select5" style="display: none" /> 
     <input id="select6" name="select6" style="display: none" /> 
     <input id="select7" name="select7" style="display: none" /> 
    </form> 

回答

2

任何有兴趣我解决了这个问题通过改变我存储数据的方式以及如何生成对话框。 上面的代码生成了一个新的对话框和脚本,每次在循环中插入新行时都会调用该对话框。

正确的做法是为单元格()指定一个类,并在span元素中使用数据属性。例如:

<span class="cellClass" data-key="<%=rs("Key")%>">remove</span> 

现在的HTML是正确标注起来,我有一个脚本块在从单击单元格要求的属性,这可以用来识别它,像这样的顶级:

$("#table1").on("click", ".cellClass",function(){ 
    // table1 is the nearest parent id to the cell 
    // cellClass is the classname given to the cell (this is an example) 
    var Key=$(this).attr("data-key"); 
    $("#Dialog").dialog("open") 
});