datatablesページネーションはスクリプトコードが正常に機能していない

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要素のデータ属性を使用することでした。例：

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

：

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

今のhtmlが適切にマークされていることを私は、セルのプロパティをクリックし、これがそうのように、それを識別するために使用することができます呼び出し、上部に1つのスクリプトブロックを持っています