在CHANGE事件上加载JQUERY DATATABLE [英] Load JQUERY DATATABLE on CHANGE event

问题描述

我正在使用这个脚本将数据加载到READY上：

I am using this script to load the DATATABLE on 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脚本如下所示：

The PHP script looks like this:

 <?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的工作原理与应该如何。

All the above code works fine. The datatable loads when the page is ready, and the datatable works like how it's supposed to.

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

What I need to do is create the ability for the user to reload the datatable when a new option is selected in a dropdown with an ID #serviceload.

所以我删除了READY事件。

So I remove the READY event.

现在，在JAVASCRIPT中，我创建一个CHANGE事件：

Now, in the JAVASCRIPT, I create a CHANGE event:

 $('#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调用中。

More than likely, I'm guessing the error is in the ajax call above.

我稍微修改了PHP脚本，如下所示：

I alter the PHP script slightly to look like this:

 <?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调用。

I am not sure if I using the AJAX call correctly in the javascript directly above.

如果您看到错误，请帮忙。

If you see the error, please help.

谢谢你们的编码人员。

Thank you, fellow coders.

推荐答案

所以经过2个星期的研究，我终于找到了解决问题的方法。

So, after 2 weeks of research, I finally found the solution to my problem.

由于我已经有一个HTML下拉列表，在READY事件中，我补充说：

Since I already had a HTML dropdown in place, in the READY event, I added this:

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

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

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

And now, when the CHANGE event is fired, the new data is populated without sending a variable to the server, which is what I was trying to do in my initial code above.

这篇关于在CHANGE事件上加载JQUERY DATATABLE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！