根据我的要求,我有一个下拉列表,当我从下拉列表中选择一个值时,需要从数据库中获取适当的数据。下拉选择值通过jQuery和Ajax发送。我在这里有几个问题
这是最简练的代码。
下拉菜单-
<select class="filter" id="secquneceDropdownId">
<option value="" selected>All</option>
<option value="INSEQUENCE">In Sequence</option>
<option value="OUTSEQUENCE">Out Sequence</option>
<option value="RECIPES">Sequence Mapping</option>
</select>
jQuery和Ajax调用以发送下拉选择的值-
$(document).ready(function() {
$("#secquneceDropdownId").change(function() {
var dropdownSelected = $(this).find(":selected").val()
var clientID = {
"isDropdownSelected" : dropdownSelected
}
console.log('dropdownSelected value is = ' + dropdownSelected)
$.ajax({
type : "POST",
url : "/IdeaOfThings/listSequences",
data : JSON.stringify(clientID),
contentType : 'application/json; charset=utf-8',
dataType : "json",
success : function(data) {
}
});
});
});
数据表调用显示数据-
$(document).ready(
function() {
var table = $('#example2').DataTable({
"ordering" : false,
});
});
答案 0 :(得分:1)
我看不到您的ajax
和datatable
之间的任何链接。
回答您的问题1.
是的,每次组合更改时都需要刷新网格,因为获取的数据将取决于所选的选项。
如果您正在寻找实现方法
这是一个样本
$("#secquneceDropdownId").change(function() {
loadData();
});
function loadData(){
var dropdownSelected = $("#secquneceDropdownId").val()
var clientID = {
"isDropdownSelected" : dropdownSelected
}
$("#tblDeviceDetail").DataTable({
"columns": [
{ "data": "ip" },
{ "data": "apiPort" },
{ "data": "hostname" }
],
"ajax": {
"url": "/IdeaOfThings/listSequences",
data : JSON.stringify(clientID),
contentType : 'application/json; charset=utf-8',
dataType : "json",
"type": "POST",
"dataSrc": "[]",
}
});
}
假设您的JSON是这样
[ { "ip" : "sfsdsdfs" , "apiPort" : "322", "hostname": "sfsdfsdf"},
{ "ip" : "5345345" , "apiPort" : "4444", "hostname": "sadfasds"}]