数据表没有被过滤/重新加载

Question

我正在使用 JQuery 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>

我正在尝试另一种方法，即下拉菜单在更改时被触发，但不获取值。那个也附上了。

这样我就可以获得下拉列表的变化值，但数据表一旦更改就不会被过滤。可能是什么原因？在控制台中，它返回 fetch.php 和 filter.php 的 JSONS。解决方案可能很简单。但我不知道我在哪里犯了错误。如果需要更多信息，请发表评论？

Answer 1

经过几个小时的努力，我发现当初始化数据表时，应该直接从下拉列表中获取传递的数据，而不是将变化的值分配给变量并传递该数据。<script type="text/javascript">&nbsp; &nbsp; //Initially gets the selected value of dropdown&nbsp; &nbsp; var status= $("#orderStatus option:selected").text(); //This is unnecessary.&nbsp; &nbsp; //DataTable Initialization&nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; var tableone = $('#example').DataTable( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "processing":&nbsp; &nbsp;true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "serverSide":&nbsp; &nbsp;true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "paging"&nbsp; &nbsp; :&nbsp; &nbsp;true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "searching" :&nbsp; &nbsp;true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "sDom": 'rtip',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "iDisplayLength"&nbsp; &nbsp; :&nbsp; &nbsp;100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "processData": false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "ajax": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url&nbsp; :"fetch.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type : "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //It's changed here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data : function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var status = $('#orderStatus').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.orderStatus = status;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; //Search field&nbsp; &nbsp; &nbsp; &nbsp; $('#search').keyup(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tableone.search($(this).val()).column(0).draw() ;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;//Then Redraw the datatable when the dropdown is selected&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#orderStatus').change(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tableone.draw();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });并在服务器端接收发布的下拉列表$orderStatus = $_POST['orderStatus'];参考：https ://makitweb.com/how-to-add-custom-filter-in-datatable-ajax-and-php/?unapproved=13009&moderation-hash=c02720a3cdf60b2886fed5a45824b850#comment-13009