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

showing 1 to 10 entries of 100 not showing in jquery datatable

本文关键字：显示 10个 数据表 jquery      更新时间：2023-09-26

我在jquery JS中面临两个问题。

1。（我在显示"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();
  });
});

正如你所看到的，当我点击数据表的第一列$｛tdetail.empNumber｝（它是href标记）时，它应该调用"det12"JS，这会导致显示另一个表单（"employeform.jsp"）。问题是，只有前10个数据行的逻辑运行良好，其余11到100条记录的逻辑不起作用。

它不起作用，因为每次在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/我无法完全复制您的设置，但请单击页面，然后单击内容为"三叉戟"的记录。

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

很棒的论坛。谢谢大家。

相关文章：