負載JQUERY DATATABLE

Question

我使用這個腳本加載上準備好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); 
?>  

以上所有代碼均正常工作。當頁面準備就緒時，數據表加載，數據表就像它應該的那樣工作。

我需要做的是在ID #serviceload的下拉列表中選擇新選項時，爲用戶創建能夠重新加載數據表的功能。

所以我刪除了READY事件。

現在，在JavaScript中，我創建了一個更改事件：

$('#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['page']

的GET PARAM如果你真的想要做一個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 
}); 

我從來沒有使用過數據表，我從文檔中得到了這個。希望這可以幫助。