分页按钮即使在禁用时也会触发 ajax - dataTable 服务器端分页

Question

我有一个使用服务器端分页初始化的数据表，它工作正常。但是，问题在于最后一页中禁用的“下一步”和“最后一个”按钮，单击时会显示“正在处理...”消息。最有可能的 on-click hey 触发了不需要的 ajax 事件。

这是我的代码：

function initTestTable(){
    myTable = $('#testTable').dataTable({
    scrollY:        "168px",
    scrollCollapse: false,
    jQueryUI:       true,
    bRetrieve : true,
    bDestroy : true,
    "bPaginate": true,
    "bSearch":false,
    bFilter: false, 
    bInfo: false,
    "sPaginationType": "input",               
    "bLengthChange" : true,
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columnDefs": [ {
        "targets": 0,
        "data": "code",
        "render": function ( data, type, full ) {
            return '<a href="'+data+'">'+data+'</a>';
          }
      },
      {
        "targets": 1,
        "data": "description",
        "render": function ( data, type, row, meta ) {
            return data;
        }
      }]
  });
 }

如果有办法阻止这种情况，请告诉我。

Answer 1

我无法使用Navigation with text input 分页插件复制您的问题，它甚至不会出现在服务器端处理模式中。

但是，当 "sPaginationType": "input" 被删除或替换为默认模式之一（例如 "sPaginationType": "full_numbers"）时，您的代码仍然有效。

考虑更新到最新版本的 DataTables (1.10.7) 并从 Navigation with text input 分页插件切换到默认分页模式或其他分页插件。

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
      url: '/test/0',
      responseTime: 200,
      response: function(settings){
         this.responseText = {
            draw: settings.data.draw,
            data: [
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ]
            ],
            recordsTotal: 1000,
            recordsFiltered: 1000
         };
      }
  });

  $('#example').dataTable({    
    "scrollY":        "168px",
    "scrollCollapse": false,
    "jQueryUI":       true,
    "bRetrieve" : true,
    "bDestroy" : true,

    "bPaginate": true,
    "bSearch":false,
    "bFilter": false, 
    "bInfo": false,
        
    //"sPaginationType": "input",
    "sPaginationType": "full_numbers",
    "bLengthChange" : true,        
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/test/0",
        "type": "GET"
    }    
  });
      
});

<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>  
<link href="//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/pagination/input.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.js"></script>
  
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">

<thead>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</thead>

<tfoot>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</tfoot>

<tbody>
</tbody>
</table>
</body>
</html>