將表單數據通過ajax傳遞給php並加載數據表

Question

一直在努力尋找解決方案，現在任何建議都會有所幫助，jsfiddle將會非常棒。

我可以在沒有使用常規表的數據表插件的情況下獲得以下工作： 不要擔心安全性，我將在稍後應用。 我只是拼命地想DataTable中顯示我返回的數據

這裏的問題是：
- 我有4個輸入的形式，用戶必須選擇他們中的至少一個。 - 在提交時需要將數據發送到PHP腳本，將搜索數據庫，並返回數據 的多行 - 我想用數據表插件

這裏是我的HTML代碼來顯示數據：

<section class="div-wrapper"> 
    <form role="form" class="form-inline" action="process.php" method="post" id="search_form"> 
    <div class="row"> 
     <div class="col-lg-3"> 
     <label for="search_brand" class="control-label lab-format search-labels">Product Brand</label> 
     <select name="search_brand" id="search_brand" class="form-control input-sm"> 
      <option value="">-Select-</option> 
      <option value="M">M</option> 
      <option value="S">S</option> 
      <option value="A">A</option> 
     </select> 
     </div> 
     <div class="col-lg-3"> 
     <label for="search_serial" class="control-label lab-format search-labels">Serial Number</label> 
     <input type="text" name="search_serial" id="search_serial" class="form-control input-sm" placeholder="Serial Number"> 
     </div> 
     <div class="col-lg-3"> 
     <label for="search_id" class="control-label lab-format search-labels">Inventory ID</label> 
     <input type="text" name="search_id" id="search_id" class="form-control input-sm" placeholder="Inventory ID"> 
     </div> 
     <div class="col-lg-3"> 
     <label for="search_imei" class="control-label lab-format search-labels">IMEI # 1</label> 
     <input type="text" name="search_imei" id="search_imei" class="form-control input-sm" placeholder="IMEI # 1"> 
     <input type="submit" name="search" value="Search" id="search" class="submit-button pull-right"> 
     </div> 
    </div> 
    </form> 
</section> 

<div> 
    <h4>Search Results</h4> 
</div> 
<section id="search_result_success" class="div-wrapper" style=""> 
    <div class="table-responsive"> 
    <table class="search-output-table table table-hover table-responsive cust-output" id="search_success_output_table"> 
     <thead> 
     <tr> 
      <th id="table-item">Item ID</th> 
      <th id="table-brand">Brand</th> 
      <th id="table-model">Model Code</th> 
      <th id="table-imei1">IMEI</th> 
      <th id="table-serial">In Value</th> 
      <th id="table-cr-date">Location</th> 
      <th id="table-status">Status</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</section> 

這裏是我的jQuery代碼：

$("#search_form").submit(function(e) { 
    isValid_src = true; 

    if ($.trim($("#search_serial").val()) == '' && 
    $.trim($("#search_brand").val()) == '' && 
    $.trim($("#search_id").val()) == '' && 
    $.trim($("#search_imei").val()) == '') { 
    isValid_src = false; 
    $("#search_serial, #search_brand, #search_id, #search_imei").css({ 
     "border": "1px solid red", 
     "background-color": "#ffcccc" 
    }); 
    } else { 
    $("#search_serial, #search_brand, #search_id, #search_imei").css({ 
     "border": "", 
     "background-color": "" 
    }); 
    } 

    if (isValid_src == false) { 
    e.preventDefault(); 
    } else { 
    e.preventDefault(); 
    var str_inv_search = $("#search_form").serialize(); 
    $("#search_success_output_table").children("tbody").remove(); 
    $('#search_success_output_table').DataTable({ 
     "processing": true, 
     "destroy": true, 
     "ajax": { 
     "url": "process_inv_search.php", 
     "type": "POST", 
     "data": { 
      str_inv_search 
     } 
     }, 
     "columns": [{ 
     "data": "item_code" 
     }, { 
     "data": "brand" 
     }, { 
     "data": "model_code" 
     }, { 
     "data": "imei1" 
     }, { 
     "data": "in_value" 
     }, { 
     "data": "rack_location" 
     }, { 
     "data": "delete_flag" 
     }], 
     "order": [ 
     [6, "asc"] 
     ] 
    }); 
    } 
}); 

我的PHP代碼：

if(isAjax()){ 
    if($_POST['search_serial'] != NULL){ 
    $post_inv_sr = $_POST['search_serial']; 
    $q = "sr_num = '{$post_inv_sr}' "; 
    }elseif($_POST['search_id'] != NULL){ 
    $post_inv_id = $_POST['search_id']; 
    $q = "item_code = '{$post_inv_id}' "; 
    }elseif($_POST['search_imei'] != NULL){ 
    $post_imei = $_POST['search_imei']; 
    $q = "imei1 = '{$post_imei}' "; 
    }elseif($_POST['search_brand'] != NULL){ 
    $post_brand = $_POST['search_brand']; 
    $q = "brand = '{$post_brand}' "; 
    } 

    $json = null; 

    $search_query = "SELECT item_code, brand, model_code, imei1, in_value, rack_location, delete_flag "; 
    $search_query .= "FROM inv1 WHERE "; 
    $search_query .= "$q"; 
    $search_query .= "ORDER BY delete_flag ASC"; 

    $search_result = mysqli_query($connection, $search_query); 

    while($row = mysqli_fetch_assoc($search_result)){ 
    $json[] = $row; 
    } 

    if($json == NULL){ 
    echo "N"; 
    }else { 
    echo json_encode($json); 
    } 

Answer 1

你非常接近。這一部分：

"data": { 
     str_inv_search 
    } 

應該是：

"data": str_inv_search 

你嵌套你的序列化表單數據爲$_POST['str_inv_search']，這是沒有必要的。