1

サーバー側のページングで初期化されたデータ テーブルが正常に動作しています。ただし、問題は最後のページの「次へ」および「最後」ボタンが無効になっていることであり、クリックすると「処理中...」メッセージが表示されます。ほとんどの場合、クリックしたときに不要な 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;
        }
      }]
  });
 }

これを止める方法があれば教えてください。

4

1 に答える 1

0

テキスト入力ページネーション プラグインでナビゲーションを使用して問題を再現できませんでした。サーバー側の処理モードでも表示されません。

ただし、"sPaginationType": "input"を削除するか、既定のモードの 1 つ ( など) に置き換えると、コードは機能します"sPaginationType": "full_numbers"。

DataTables の最新バージョン (1.10.7) に更新し、テキスト入力ページネーション プラグインを使用したナビゲーションから、既定のページネーション モードのいずれかまたは別のページネーション プラグインに切り替えることを検討してください。

$(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>

于 2015-06-30T11:43:47.307 に答える