Question

首先我道歉，因为我知道人们之前已经遇到过这个问题并且已经多次回答了。我很遗憾地说我不理解已经给出的答案，因此需要就我的特定问题寻求建议。

我使用最新的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>

Answer 1

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

正确的方法是将一个类分配给cells（），并使用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")
});

数据表分页打破了脚本代码的工作

1 个答案: