-1

我尝试使用数据表，因为它很简单，但现在我在单击后重新加载并从 ajax 请求获取数据表中的新数据时遇到问题。有关更多详细信息，这是我下面的脚本：

索引.html

<html>
<head>
  <title>Datatables</title>
  <link rel="stylesheet" type="text/css" href="../plugins/DataTables/styles.css"/>
  <script type="text/javascript" src="../plugins/DataTables/datatables.min.js"></script>
  <script type="text/javascript" src="../plugins/DataTables/javascript.js"></script>
  <script src="../lib/js/jquery/jquery.min.js"></script>
</head>
<body>
  <table id="tablenya" class="datatable responsive nowrap" style="width:100%">
   <thead>
     <tr>
       <th>No</th>
       <th>PO Date</th>
       <th>WO No</th>
       <th>PO No</th>
       <th>Customer</th>
       <th>Size</th>
       <th>Status</th>
       <th>Option</th>
     </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
</html>

javascript.js

$(document).ready(function(){
  var tablenya = $('#tablenya').dataTable({
    "ajax": "process.php?action=result",
    "columns": [
      { "data": "no" },
      { "data": "date_po" },
      { "data": "no_spk"},
      { "data": "no_po" },
      { "data": "customer"},
      { "data": "size"},
      { "data": "status"},
      { "data": "functions","sClass": "functions" }
    ]
  });
});

然后 process.php 部分在数据库中获取我的数据

<?php
require 'connect.php';
$action = '';
$id  = '';
if(isset($_GET['action'])){
  $action = $_GET['action'];
  if($action == 'result'){
    if (isset($_GET['id'])){
        $id = $_GET['id'];
        if (!is_numeric($id)){
            $id = '';
        }
     }
   } else {
    $action = '';
   }
}

$mysqli_data = array();

if ($action == 'result'){
  $query = "SELECT * FROM workorder WHERE status='1' ORDER BY id DESC";
  $sql = $connect->query($query);
    if (!$sql){
      $result  = 'error';
      $message = 'query error';
    } else {
        $result  = 'success';
        $message = 'query success';
        $no = 1;
        while($row = $sql->fetch_array()){

            $functions  = '<div class="function_buttons"><ul>';
            $functions .= '<li class="function_view"><a data-id="'.$row['id'].'" data-name="'.$row[$dataName].'" title="View details"><span>View details</span></a></li>';
            $functions .= '</ul></div>';

            $mysqli_data[] = array(
                "no"        => $no++,
                "date_po"   => $row['date_po'],
                "no_spk"    => $row['no_spk'],
                "no_po"     => $row['no_po'],
                "customer"  => $row['customer'],
                "size"      => $row['size'],
                "status"    => $status,
                "functions" => $functions
            );
        }
    }
}

mysqli_close($connect);

$data = array(
    "result"  => $result,
    "message" => $message,
    "data"    => $mysqli_data
);

$json_data = json_encode($data);
print $json_data;
?>

加载页面“index.html”后，我的数据使用数据表生成。在列选项中查看“函数视图”，我想通过单击创建另一个函数，以显示来自数据库中另一个表的数据，该数据基于带有 ajax 请求的值“data-id=”，在它下面：

javascript.js 部分 onclick 函数

$(document).ready(function(){
  $(document).on('click', .function_view a, function(e){
    e.preventDefault();
    var id      = $(this).data('id');
    var request = $.ajax({
        url:          "another.php?action=result",
        cache:        false,
        data:         'id='+id,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
    });
    request.done(function(output){
        if (output.result == success){

         /////////////////////////////////////////
         // reload datatables and showing new request
         ////////////////////////////////////////

        } else {
            show_message('Information request failed', 'error');
        }
    });
    request.fail(function(jqXHR, textStatus){
        show_message('Information request failed: '+textStatus, 'error');
    });
  });
});

这个 another.php 部分

<?php
require 'connect.php';
$action = '';
$id  = '';
if(isset($_GET['action'])){
  $action = $_GET['action'];
  if($action == 'result'){
    if (isset($_GET['id'])){
        $id = $_GET['id'];
        if (!is_numeric($id)){
            $id = '';
        }
     }
   } else {
    $action = '';
   }
}

$mysqli_data = array();

if($action == 'result'){

    if ($id == ''){
        $result  = 'erro';
        $message = 'ID missing';
    } else {

        $idx = mysqli_real_escape_string($connect, $id);
        $query = "SELECT * FROM workorder LEFT JOIN workorder_process ON workorder.id_fk = workorder_process.id_fk WHERE workorder.id = '".$idx."'";
        $sql = $connect->query($query);
        $get = $sql->fetch_array();

        if($get['delivery_type'] == '2'){
            $result  = 'success';
            $message = 'query success';
            $no = 1;

            while($row = $sql->fetch_array()){
                $functions  = '<div class="function_buttons"><ul>';
                $functions .= '<li class="function_edit"><a data-id="'.$row['id'].'" data-name="'.$row[$dataName].'" title="Edit"><span>Edit</span></a></li>';
                $functions .= '</ul></div>';

                $mysqli_data[] = array(
                    "no"        => $no++,
                    "date_po"   => $row['date_po'],
                    "date_spk"  => $row['date_spk'],
                    "no_spk"    => $row['no_spk'],
                    "no_po"     => $row['no_po'],
                    "customer"  => $row['customer'],
                    "size"      => $row['size'],
                    "qore"      => $row['qore'],
                    "roll"      => $row['roll'],
                    "material"  => $row['material'],
                    "ingredient"  => $row['ingredient'],
                    "send_qty"  => $row['send_qty'],
                    "volume"    => $row['volume'],
                    "annotation" => $row['annotation'],
                    "functions" => $functions
                );
            }

        } else {
            $result  = 'error';
            $message = 'ID missing';
        }
    }
}

mysqli_close($connect);

$data = array(
    "result"  => $result,
    "message" => $message,
    "data"    => $mysqli_data
);

$json_data = json_encode($data);
print $json_data;
?>

那么，如何通过ajax请求单击“功能视图”后重新加载并获取新数据？在注释行 javascript.js

// 重新加载数据表并显示新请求

有可能吗？请给我建议

4

3 回答 3

0 

$(document).ready(function() {
  $("#country").on("change", function() {
    var country_id = $(this).val();
    if (country_id) {
      $.ajax({
        type: "POST",
        url: "location_ajax.php",
        data: {
          countryid: country_id,
        },
        success: function(html) {
          $("#state").html(html);
        }
      });
    } else {
      $("#state").html("<option value=''>Select Country</option>");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-9">
  <label>Location:</label>
  <select name="country" id="country" class="form-control" required>
    <option value="">Select A Country</option>
    <?php 
      if($count > 0) {
        while($row = mysqli_fetch_assoc($result)){
        $country_id = $row['country_id'];
        $country_name = $row['c_name'];
        echo "<option value='$country_id'>$country_name</option>";
        }
      }
      else {
        echo "<option value=''>Country is Not Available</option>";
      }
      ?>
  </select>
  <select name="state" id="state" class="form-control" required>
    <option value="">Select Country</option>
  </select>
</div>


//location_ajax.php
<?php 
include("connect.php");


if(isset($_POST['countryid'])){
	$country_id = $_POST['countryid']; ?>

	<script type="text/javascript">
		var c = <?php echo "$country_id"; ?>
		alert("My Number " + c);
	</script>
<?php

	if($country_id == 100) {
		$sql = "SELECT * FROM states WHERE country = $country_id ORDER BY state_id";
		$result = $db->query($sql);
		$count = mysqli_num_rows($result);
		if($count > 0) {
			echo "<option value=''>Select State</option>";
			while($row = mysqli_fetch_assoc($result)) {
				$state_id = $row['state_id'];
				$state_name = $row['state_name'];
				echo "<option value='$state_id'>$state_name</option> ";			
			}
		}
		else {
			echo "<option value=''>Select State</option>";
		}
	}
	else {
		echo "<option value=''>Select State</option>";
		echo "<option value='0'>Others</option>";
	}
}
?>

我只知道您正在尝试使用 ajax 在 . 以下代码可能不适用于您的特定代码，但它可能会对您有所帮助。请参考代码。在这段代码中，当你选择一个国家时，ajax 会自动加载那个国家的状态！

于 2018-04-25T08:51:24.380 回答
0

您只需要这一行来重新加载数据表，您也可以创建一个函数并调用它。试一次。

tablenya.ajax.reload(null,false);
于 2018-04-25T08:57:31.823 回答
0

在您的处理程序中，另一个解决方案onclick是销毁表并重新创建。要销毁，请使用$('#tablenya').DataTable().destroy(). 然后，您可以像之前在代码前面所做的那样，在之后初始化表。

于 2018-04-25T10:09:16.013 回答