javascript - 数据表: Using a function with ajax.重新加载()-6ren

javascript - 数据表: Using a function with ajax.重新加载()

转载作者：行者123 更新时间：2023-12-01 05:43:48

我在使用 ajax.reload() 方法时遇到了一些问题 - 什么也没发生。我已经用这个 JavaScript 进行了测试:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": {
            "async": false,
            "url": "arrays.txt",
            "dataSrc": function(json){return json;} // really necessary ?
        }
    } );

    $('#reload').click(function () {
        table.ajax.reload(function(data){
            console.log(data);
        }, false);
    } );
} );

arrays.txt内容:

[
        [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ]
]

和 html 内容:

<button id="reload">reload</button>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
</table>

如果我将“您的”代码(dataTables.js)更改为

if(callback){
  var api = new _Api( settings );
  callback( api.ajax.json() );
}

而不是

if(callback){
  var api = new _Api( settings );
  api.one( 'draw', function(){
    callback( api.ajax.json() );
  });
}

它对我有用......

实际上，如果您再次单击该按钮，它就会起作用，但这不是解决方案。

最佳答案

您的代码运行良好。

我已经删除了async: false，这似乎没有必要，但是代码也可以使用此选项。

选项 dataSrc 是必需的，因为您要返回数组数组作为数据，但它可以简化为 dataSrc: ""。来自 manual :

Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.

请参阅下面的示例进行演示。

$(document).ready(function () {
   // AJAX emulation for demonstration only
   $.mockjax({
      url: 'arrays.txt',
      responseTime: 200,
      response: function(settings){
        this.responseText = [
        [
           "Tiger Nixon",
           "System Architect",
           "Edinburgh",
           "5421",
           new Date(),
           "$320,800"
        ],
        [
          "Garrett Winters",
          "Accountant",
          "Tokyo",
          "8422",
          new Date(),
          "$170,750"
        ]
      ]
     }
   });

   var table = $('#example').DataTable({
       "ajax": {
           url: "arrays.txt",
           dataSrc: ""
       }
   });
  
   $('#reload').click(function () {
       table.ajax.reload(function(data){
           console.log(data);
       }, false);
   } );
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.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.7/js/jquery.dataTables.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
  
</head>

<body>
<button id="reload">reload</button>
<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>