Question

我正在使用此脚本在ready上加载DataTable：

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

因此，经过2周的研究，我终于找到了解决问题的方法。

由于我已经有一个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事件时，将填充新数据而不向服务器发送变量，这正是我在上面的初始代码中尝试做的事情。

Answer 2

您可以执行GET请求

var $dataTable: $('#example1').DataTable({
     "ajax": {
        "url": "scripts/server_processing.php",
        "data": { page: page }
     },
     "data": data,
     "iDisplayLength": 25,
     "order": [[2, "asc"]],
     "scrollY": 600,
     "scrollX": true,
     "bDestroy": true
});

并使用$_GET['page']

检索您的获取参数

如果你真的想做一个POST，你可以这样做：

var $dataTable: $('#example1').DataTable({
     "ajax": {
        "url": "scripts/server_processing.php",
        "data": function ( d ) {
           d.page = page;
        },
        "type": "POST"
     },
     "data": data,
     "iDisplayLength": 25,
     "order": [[2, "asc"]],
     "scrollY": 600,
     "scrollX": true,
     "bDestroy": true
});

我从未使用过数据表，我从文档中得到了这个。希望这会有所帮助。

在更改事件上加载jQuery DataTable

2 个答案: