未筛选/重新加载数据表

Question

我正在使用JQuery Datatable插件处理服务器端，当下拉列表更改时，它不会被刷新。我将通过datatable向我的PHP类发送一个值，该类从后端获取记录。然后场景是，每当下拉列表发生更改时，都会根据所选的值对表进行排序。我现在想做的是，当下拉菜单改变时，甚至不开火。

<script type="text/javascript">
//Initially gets the selected value of dropdown
var status= $("#orderStatus option:selected").text();
//DataTable Initialization
$(document).ready(function() {
var tableone = $('#example').DataTable( {
"processing":   true,
"serverSide":   true,
"paging"    :   true,
"searching" :   true,
"sDom": 'rtip',
"iDisplayLength"    :   100,
"processData": false,
"ajax": {
url  :"fetch.php",
type : "POST",
data : {
status: status
}
}
} );
//Search field
$('#search').keyup(function(){
tableone.search($(this).val()).column(0).draw() ;
});
} );
//Whenever the value is changed, the table has to be sorted acc to its value.
$(document).on('change','#orderStatus',function(event){
var drpStats= $(this).val();
$.ajax({
url  :"filter.php",
type : "POST",
data : {
status : drpStats
},
success: function (data) {
$('#example').DataTable().ajax.reload();
}
});
});
</script>

我正在尝试的另一种方法是，当下拉列表发生更改时，它会被触发，但不会获取值。这也是附加的。

<script type="text/javascript">
var status= $("#orderStatus option:selected").text();
$(document).ready(function() {
var tableone = $('#exampleone').DataTable( {
"processing":   true,
"serverSide":   true,
"paging"    :   true,
"searching" :   true,
"sDom": 'rtip',
"iDisplayLength"    :   100,
"processData": false,
"ajax": {
url  :"fetch.php",
type : "POST",
data : {
status: status
}
}
} );
$('#search').keyup(function(){
tableone.search($(this).val()).column(0).draw() ;
});
$("#orderStatus ").on('change', function() {
var drpStats= $(this).val();
$.ajax({
url  :"filter.php",
type : "POST",
data : {
status: drpStats
},
success: function (data) {
$('#example').DataTable().ajax.reload();
}
});
});
} );
</script>

通过这种方式，我得到了下拉列表的更改值，但数据表一旦更改就不会被过滤。原因可能是什么？在控制台中，它同时返回fetch.php和filter.php的JSONS。解决方案可能很简单。但我无法理解我犯的错误在哪里。请评论是否需要更多信息？

Answer 1

经过数小时的努力，我发现当数据表初始化时，传递的数据应该直接从下拉列表中获取，而不是将变化的值分配给变量并传递数据。

<script type="text/javascript">
//Initially gets the selected value of dropdown
var status= $("#orderStatus option:selected").text(); //This is unnecessary.
//DataTable Initialization
$(document).ready(function() {
var tableone = $('#example').DataTable( {
"processing":   true,
"serverSide":   true,
"paging"    :   true,
"searching" :   true,
"sDom": 'rtip',
"iDisplayLength"    :   100,
"processData": false,
"ajax": {
url  :"fetch.php",
type : "POST",
//It's changed here
data : function(data){
var status = $('#orderStatus').val();
data.orderStatus = status;
}
}
} );
//Search field
$('#search').keyup(function(){
tableone.search($(this).val()).column(0).draw() ;
});
//Then Redraw the datatable when the dropdown is selected
$('#orderStatus').change(function(){
tableone.draw();
});
});

并且在服务器端接收下拉列表，因为它是张贴的

$orderStatus = $_POST['orderStatus'];

参考：https://makitweb.com/how-to-add-custom-filter-in-datatable-ajax-and-php/?unapproved=13009&审核散列=c02720a3cdf60b2886fed5a45824b850#注释-13009