Question

我遇到了jquery JS的两个问题。

1。（我在节目中的默认显示长度默认为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>

2。＆＃34;显示100个条目中的1到10个＆＃34;没有显示。我使用以下代码。

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

正如你所看到的，当我点击数据表的第一列$ {tdetail.empNumber}是href标签时，它应该调用＆＃39; det12＆＃39; JS导致显示另一个表单（＆＃39; employeeform.jsp＆＃39;）。问题仅在于前10个数据库这个逻辑工作正常，其余的11到100个记录不起作用。

Answer 1

它不起作用，因为每次在dataTable中显示新页面时都会重置<td> click函数，并且您只执行$('td a[name="det12"]').click(function(){一次（这就是为什么它适用于第一个页面，行1-10）。解决此问题的一种方法是每次重绘数据表时设置触发器（即，当用户单击另一页时），可以使用回调函数fnDrawCallback：

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

参见演示 - ＆gt; http://jsfiddle.net/hf1zqpoz/ 我无法完全重现您的设置，只需点击页面，然后点击内容为“Trident”的记录。

Answer 2

看起来某些线程（以前可能已被调用但没有被正确销毁）会产生这些问题。所以我在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();
      });
  });

很棒的论坛。谢谢你们。

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

2 个答案: