时间戳

首页 > 解决方案 > 数据表没有被过滤/重新加载

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

问题描述

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

我正在尝试另一种方法，即下拉列表在更改时被触发，但不获取值。那也是附上的。

<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。解决方案可能很简单。但我无法到达我在哪里犯了错误。如果需要更多信息，请发表评论？

标签： javascriptjqueryajaxdatatable

解决方案

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

<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&moderation-hash=c02720a3cdf60b2886fed5a45824b850#comment-13009

推荐阅读