Javascript 显示jquery数据表中未显示的100个条目中的1到10个条目

我在jQueryJS中面临两个问题

一,。（我在显示“10”条目中的默认显示长度默认为10）。因此，对于前10条记录，我的逻辑运行良好。当我单击“下一步”按钮并导航到剩余的分页记录并单击任何数据行时，我的逻辑不起作用

<table>
  <c: forEach items="${tdetails}" var="tdetail" varStatus="loop">
  <tr>
      <td>${loop.index+1}</td>
      <td><a tag name="det12" id="delhi" href="#" >${tdetail.empNumber}</a></td>
      <td>${tdetail.empName}</td>
      <td>${tdetail.empDate}</td>
      <td>${tdetail.empStatus}</td>
  </tr>
  </c:forEach>
</table>
<form id="employeeform" action="./getEmployeeStatusDisplay" method="get">
  <input type="hidden" id="empNumber" name="empNumber" value="${tdetail.empNumber}">
</form>

${loop.index+1}
${tdetail.empName}
${tdetail.empDate}
${tdetail.empStatus}

二,。“显示100个条目中的1到10个”未显示。我正在使用以下代码

$(document).ready(function(){  
    $('#detailstable').dataTable({  
    "bFilter": false,  
    "bInfo": false,  
    "bAutoWidth": false,  
    "bSortClasses": false,  
    "displayLength":10,  
    "oLanguage": {  
        "sInfo": "Showing START to END of TOTAL entries",  
        "sZeroRecords": "No data to show" },  
        "sDom": 'T<"clear">lfrtip'  
  });

  $('td a[name="det12"]').click(function(){
      alert("inside JS");
      id=$(this).text();
      alert(id);
      $('#empNumber').val(id);
      $.blockUI({ 
          message: $('#spinnerbox'), 
          css: { 
              margin:'0px auto' 
          } 
      }); 
      $("#spinner").show();
      $("#employeeform").submit();
  });
});

$（文档）.ready（函数（）{
$（'#detailstable'）。数据表（{
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假，
“bSortClasses”：false，
“显示长度”：10，
“语言”：{
“sInfo”：“显示总条目的开始到结束”，
“sZeroRecords”：“无数据显示”}，
“sDom”：“Tlfrtip”
});
$（'td a[name=“det12”]”）。单击（函数（）{
警报（“内部JS”）；
id=$（this.text（）；
警报（id）；
$（'#empNumber'）.val（id）；
$.blockUI（{
信息：$（“#喷丝头盒”），
css:{
保证金：'0px自动'
} 
}); 
$（“#微调器”）.show（）；
$（“#雇员表格”）.submit（）；
});
});

---

如您所见，当我单击datatable的第一列${tdetail.empNumber}即href标记时，它应该调用'det12'JS，从而显示另一个表单（'employeeform.jsp'）。问题是，仅前10个数据行的逻辑工作正常，其余11到100个记录的逻辑工作不正常。

它不工作，因为每次数据表中显示新页面时，

单击功能都会重置，而您只执行
$（'td a[name=“det12”]）。单击（function（）{/code>一次（这就是为什么它适用于第一页，第1-10行）。解决此问题的一种方法是在每次重新绘制数据表时（即，当用户单击另一页时）设置触发器，回调函数可用于：

$('#detailstable').dataTable({
   "bFilter": false,
   "bInfo": false,
   "bAutoWidth": false,
   "bSortClasses": false,
   "displayLength":10,
   "oLanguage": {
       "sInfo": "Showing START to END of TOTAL entries",
       "sZeroRecords": "No data to show" 
   },
   "sDom": 'T<"clear">lfrtip',

   fnDrawCallback : function() {
       $('td a[name="det12"]').click(function(){ 
          alert("inside JS"); 
          id=$(this).text(); 
          alert(id); 
          $('#empNumber').val(id); $.blockUI({ message: $('#spinnerbox'), css: { margin:'0px auto' } });    
          $("#spinner").show(); 
          $("#employeeform").submit(); 
       })
    }                                  
});

$（'#detailstable'）。数据表({
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假，
“bSortClasses”：false，
“显示长度”：10，
“语言”：{
“sInfo”：“显示总条目的开始到结束”，
“sZeroRecords”：“无数据显示”
},
“sDom”：“Tlfrtip”，
fnDrawCallback:函数（）{
$（'td a[name=“det12”]”）。单击（函数（）{
警报（“内部JS”）；
id=$（this.text（）；
警报（id）；
$（'empNumber'）.val（id）；$.blockUI（{message:$（'empnerbox'），css:{margin:'0px auto'}）；
$（“#微调器”）.show（）；
$（“#雇员表格”）.submit（）；
})
}                                  
});

请参阅演示->我无法完全复制您的设置，但请单击页面，然后单击内容为“Trident”的记录。
它看起来像某个线程（以前可能被调用但未正确销毁）可能会产生此类问题。因此，我在JSP文件的脚本标记中尝试了以下内容。然后它工作正常。希望这对面临类似问题的人有所帮助

$('#detailstable').dataTable({
   "bFilter": false,
   "bInfo": false,
   "bAutoWidth": false,
   "bSortClasses": false,
   "displayLength":10, 
   });
   var bindLinks = function(){
 $('td a[name="det12"]').click(function(){
   id=$(this).text();
   $('#empNumber').val(id);
   $("#employeeform").submit();
  });
 };
 $("#detailstable").bind("draw.dt", function(){
        bind();
      });
  });

非常好的论坛。谢谢大家。
请制作一个“请”？请澄清“逻辑不工作”是什么意思谢谢大家。请查看我上面编辑的帖子。更多信息请让我知道。作为这个网站的新手，我发现粘贴代码片段有点困难。现在我学会了。：）非常感谢David。我尝试了fnDrawCallback（）你已经解释过了。但是它也不起作用。最后在我朋友的帮助下，我找到了解决办法。