javascript - 在更改事件上加载 jQuery DataTable

Question

我正在使用此脚本在准备就绪时加载数据表:

function renderDataTable(serviceUrl) 
{
  var $dataTable = $('#example1').DataTable({
    "ajax": serviceUrl,
    "iDisplayLength": 25,
    "order": [[2, "asc"]],
    "scrollY": 600,
    "scrollX": true,
    "bDestroy": true
   });
 });

这是ready事件:

 $(document).ready(function()
 {
   renderDataTable('api/service_teus.php');
 });

PHP 脚本如下所示:

 <?php
 $select = "SELECT SERVICE, SIZE_TYPE, TEUS FROM table";
 $query = mysqli_query($dbc, $select) or die(mysqli_error());

 $out = array();
 while($row = $query->fetch_assoc())
 {
   $out[] = $row;
 }
 echo json_encode($out);
 mysqli_free_result($query);
 ?>     

以上所有代码都可以正常工作。当页面准备好时，DataTable 会加载，并且 DataTable 会按照预期的方式工作。

我需要做的是，当在 ID 为 #serviceload 的下拉列表中选择新选项时，为用户创建重新加载数据表的功能。

因此我删除了 ready 事件。

现在，在 JavaScript 中，我创建一个 change 事件:

 $('#serviceload').change(function()
 {
   var page = $('#serviceload').val();  // user selection

   var $dataTable: $('#example1').DataTable({  // datatable
     "ajax": "api/service_teus.php", {page: page},  // here is where I think the problem lies
     "data": data,
     "iDisplayLength": 25,
     "order": [[2, "asc"]],
     "scrollY": 600,
     "scrollX": true,
     "bDestroy": true
   });
 });

我猜测错误很可能出在上面的 ajax 调用中。

我稍微修改一下 PHP 脚本，如下所示:

 <?php
 if($_POST['page'] == true)
 {
   $service = mysqli_real_escape_string($dbc, $_POST['page']);
   $select = "SELECT SERVICE, SIZE_TYPE, TEUS FROM table WHERE SERVICE - '$service'";
   $query = mysqli_query($dbc, $select) or die(mysqli_error());

   $out = array();
   while ($row = $query->fetch_assoc())
   {
     $out[] = $row;
   }
   echo json_encode($out);
   mysqli_free_result($query);
 }
 ?>

我不确定我是否在上面的 JavaScript 中正确使用了 AJAX 调用。

Answer 1

所以，经过两周的研究，我终于找到了解决我的问题的方法。

由于我已经有一个 HTML 下拉列表，因此在 READY 事件中，我添加了以下内容:

 var table = $('#example1').DataTable();
 $('#serviceload').on('change', function(){
   table.columns(1).search( this.value ).draw();
 });

我在这里找到的:http://jsfiddle.net/Ratan_Paul/5Lj6peof/1/

现在，当 CHANGE 事件被触发时，新数据将被填充，而不会将变量发送到服务器，这就是我在上面的初始代码中尝试做的事情。