加载jQuery的数据表上更改事件(Load jQuery DataTable on change

我使用这个脚本加载的数据表ready ：

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中加载和数据表的工作原理是它应该如何。

我需要做的是为用户创造当和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);
 }
 ?>

我如果正确使用我的AJAX调用在JavaScript直接在上面我不知道。

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 PARAM $_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
});

我从来没有使用过的数据表，我得到这个从文档。 希望这可以帮助。

文章来源: Load jQuery DataTable on change event