javascript - 单击按钮后重新加载数据表

Question

我确信有一些(更好的)方法可以做到这一点，但我无法找到任何工作方式。单击按钮时，我试图让数据表加载新数据(来自不同的数据源)。

这是我所拥有的:

$(document).ready(function() {

  $('#datatable2').dataTable( {

    "ajax": {
      "url":"simple4.php",
      "type":"GET"
    }  ,

    "paging":        true, 
    "pageLength": 20,
    "order": [[ 2, "asc" ]],
    "aoColumns": [
      { "bSortable": false, "width": "25%"  },
      { "bSortable": true, "width": "30%"  },
      { "bSortable": true, "width": "15%"  },
      { "bSortable": true, "width": "15%"  },

      { "bSortable": true, "width": "15%"  },
      { "bSortable": false, "width": "0%", "visible":false  },

    ],
  });

  $( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
  }); 
});

初始表(来自 simple4.php)加载正常。我希望它在我单击按钮时发生变化(在本例中为 id=option2)，但是当我单击该按钮时没有任何反应。

以防万一，这里是按钮代码，以防我遗漏一些明显的东西:

<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2
</label>

不确定是什么问题。任何见解都会有所帮助。

更新:请参阅问题解释下方的答案。我没有做的一件事显然有很大的不同，那就是使用“dataTable”与“DataTable”。您需要大写 D 和大写 T。这是现在可以使用的固定代码:

$(document).ready(function() {
var table = $("#datatable2").DataTable({

  "ajax": {
    "url":"simple3.php",
    "type":"GET"
}  ,

   "paging":        true, 
   "pageLength": 20,
"order": [[ 2, "asc" ]],
  "aoColumns": [
  { "bSortable": false, "width": "25%"  },
  { "bSortable": true, "width": "30%"  },
 { "bSortable": true, "width": "15%"  },
  { "bSortable": true, "width": "15%"  },

   { "bSortable": true, "width": "15%"  },
  { "bSortable": false, "width": "0%", "visible":false  },

  ],

});
$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});
});

还有一件事……当我点击我的单选按钮时应该触发的我的功能没有工作。必须从此改变:

$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});

对此:

$('input[id=option2]').change(function(){
table.ajax.url( "simple4.php" ).load();
});

Answer 1

首先，正如其他人所说，未设置变量“table”。

第二，当你打电话的时候

var table = $('#datatable2').dataTable({.....}) 

您正在返回一个无法访问任何 DataTables API 的 jQuery 对象

要获取 DataTables API 实例，您需要像这样进行调用:

var table = $('#datatable2').DataTable({....});

这应该有效，假设您的 url 返回的数据格式正确。

来源:https://datatables.net/faqs/#api