显示 1 到 10 个条目 100 未显示在 jquery 数据表中答案

【问题标题】：showing 1 to 10 entries of 100 not showing in jquery datatable显示 1 到 10 个条目 100 未显示在 jquery 数据表中
【发布时间】：2014-09-11 05:25:23
【问题描述】：

我在使用 jquery JS 时遇到了两个问题。

1 . （我在 show '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>

2 。 “显示 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();
  });
});

如您所见，当我单击作为 href 标记的数据表的第一列 ${tdetail.empNumber} 时，它应该调用“det12”JS，从而显示另一个表单（“employeeform.jsp”） .问题是只有前 10 个数据行这个逻辑工作正常，剩下的 11 到 100 条记录这不起作用。

【问题讨论】：

请发jsfiddle.net？
请澄清“逻辑不起作用”是什么意思
谢谢大家。请参阅我上面编辑的帖子。请让我知道任何进一步的信息。作为这个网站的新手，发现粘贴代码 sn-ps 并不困难。现在我学会了。 :)

标签： javascript jquery datatables jquery-datatables

【解决方案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(); 
       })
    }                                  
});

查看演示 -> http://jsfiddle.net/hf1zqpoz/ 我无法完全复制您的设置，但请单击页面，然后单击内容为“Trident”的记录。

【讨论】：

非常感谢大卫。我试过你已经解释过的 fnDrawCallback() 。但是有些方法也不起作用。最后在朋友的帮助下，我找到了解决方案。

【解决方案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();
      });
  });

很棒的论坛。谢谢大家。

【讨论】：