elboffor - 1 year ago 54
jQuery Question

# datatables pagination is breaking script code from working

Firstly I apologise as I know people have had this issue before and it has been answered many times.
I'm sorry to say that I don't understand the answers that have been given, hence the need to seek advise on my particular problem.

I'm using the latest jQuery and dataTables library and can draw the table fine getting my data via classic ASP.

The problem occurs on all pages after page 1 (disabling pagination makes everything work isn't the desirable outcome).

I understand the way dataTables works is by messing with the tr's in the DOM and from the other posts I've read, using .on would resolve this but it's where I'm coming unstuck.

My code looks something like this (I Have multiple tabbed tables on this page, hence having the dialog button copying the data to the inputs in the form and submitting)

    <script>
$().ready(function(){$("#table1").dataTable();
});
</script>
<table id="table1">
<tr>
<th>Name</th>
<th>Access Level</th>
<th>Last Edited</th>
<th>Last Edited By</th>
<th></th>
</tr>
<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 />
</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>


For anyone interested I fixed this by changing the way I was storing the data and how the dialog was generated. the code above generated a new dialog box and script to call that dialog box everytime a new row was inserted fromt he loop.

The correct way of doing it was to assign a class to the cells () and also using data attributes in the span element. example:

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


Now that the html is properly marked up I have one script block at the top which calls the properties from the cell clicked and this can be used to identify it, like so:

$("#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")
});