Javascript StateSave在Yajra数据表的外部筛选器中不工作

我使用Yajra Datatable显示管理员列表，并使用StateSave保持分页/排序。如果stateSave仅用于分页和排序，它仍然有效。但如果用于筛选（例如按姓名、电话或电子邮件筛选），stateSave将不起作用。除了stateSave还有其他功能吗

下面是过滤器的屏幕截图

这是数据表

 $.fn.dataTable.ext.errMode = 'none';
    $('#datatable').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        stateSave : true,
        "bFilter": false,
        "lengthChange": false,
        ajax: "{{ route('admin.table') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
            {data: 'name', name: 'name'},
            {data: 'city', name: 'city'},
            {data: 'email', name: 'email'},
            {data: 'phone', name: 'phone'},
            {data: 'level', name: 'level'},
            {data: 'action', name: 'action', searchable: false, orderable: false}
        ]
    }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

    $(document).on('click', '.filter', function() {
        filter();
    });

    function filter() {
        var name      = $('#name').val();
        var email      = $('#email').val();
        var phone   = $('#phone').val();
        $.fn.dataTable.ext.errMode = 'none';

        var table = $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave:true,
            destroy: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: {
                url: "{{ route('admin.table') }}",
                type: 'get',
                data: function(d) {
                    d.name = name;
                    d.email = email;
                    d.phone = phone;
                }
            },
            columns: [
                {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                {data: 'name', name: 'name'},
                {data: 'city', name: 'city'},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'level', name: 'level'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ]


        });

        var state = table.state.loaded();
        if (state) {
            table.columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;

                if (colSearch.search) {
                    $('input', table.column(colIdx).footer()).val(colSearch.search);
                }
            });

            table.draw();
        }

    }

感谢您的预告

HTML部分
    HTML PART



    <div class="box-body table-responsive">
    <table id="datatable" class="table table-striped table-bordered" style="width:100%">
    <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>City</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Level</th>
      <th>Action</th>
    </tr>
    </thead>
    <thead class="transparent-bg">
    <tr>
      <th></th>
      <th>
        {!! Form::text('name', null, ["class" => "search-input-text form-control", "data-column" => 1, "placeholder" => 'name',"size"=>"15"]) !!}
        <a class="reset-data" href="javascript:void(0)"><i class="fa fa-times"></i></a>
      </th>
      <th></th>
      <th>
        {!! Form::text('email', null, ["class" => "search-input-text form-control", "data-column" => 3, "placeholder" => 'email',"size"=>"15"]) !!}
        <a class="reset-data" href="javascript:void(0)"><i class="fa fa-times"></i></a>
      </th>
      <th>
        {!! Form::text('phone', null, ["class" => "search-input-text form-control", "data-column" => 4, "placeholder" => 'phone',"size"=>"15"]) !!}
        <a class="reset-data" href="javascript:void(0)"><i class="fa fa-times"></i></a>
      </th>
      <th></th>
      <th></th>
    </tr>
  </thead>
</table>
</div>

    SCRIPT PART
    <script>

    (function () {
    var dataTable = $('#datatable').dataTable({
    processing: true,
    serverSide: true,

    ajax: {
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: '{{ route("admin.table") }}',
      type: 'post',
    },
    columns: [
    {data: null, searchable: false, sortable: false},
    {data: 'name', name: 'name'},
    {data: 'city', name: 'city'},
    {data: 'email', name: 'email'},
    {data: 'phone', name: 'phone'},
    {data: 'level', name: 'level'},
    {data: 'actions', name: 'actions', searchable: false, sortable: false, "width": "20%"}
    ],
    // order: [[7, "desc"]],
    searchDelay: 500,
    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
     $("td:nth-child(1)", nRow).html(iDisplayIndex + 1);
     return nRow;
    }
    });
    Backend.DataTableSearch.init(dataTable);
     })();
    </script>

身份证件
名称
城市
电子邮件
电话
水平仪
行动
{！！Form:：text（'name'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>1，“占位符”=>“name'，“size”=>“15”]）
{！！Form:：text（'email'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>3，“占位符”=>“email'，“size”=>“15”]）
{！！Form:：text（'phone'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>4，“占位符”=>“phone'，“size”=>“15”]）
脚本部分
（功能（）{
var dataTable=$（'#dataTable'）。dataTable({
处理：对，
服务器端：是的，
阿贾克斯：{
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
},
url:{{route（“admin.table”）}}，
键入：“post”，
},
栏目：[
{data:null，searchable:false，sortable:false}，
{data:'name'，name:'name'}，
{数据：'城市'，名称：'城市'}，
{数据：'email'，名称：'email'}，
{数据：'phone'，名称：'phone'}，
{数据：'level'，名称：'level'}，
{数据：'actions'，名称：'actions'，可搜索：false，可排序：false，“宽度”：“20%”
],
//订单：[[7，“说明”]]，
搜索延迟：500，
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
$（“td:nth child（1）”，nRow）.html（iDisplayIndex+1）；
返回nRow；
}
});
Backend.DataTableSearch.init（dataTable）；
})();

HTML部分
身份证件
名称
城市
电子邮件
电话
水平仪
行动
{！！Form:：text（'name'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>1，“占位符”=>“name'，“size”=>“15”]）
{！！Form:：text（'email'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>3，“占位符”=>“email'，“size”=>“15”]）
{！！Form:：text（'phone'，null，[“class”=>“搜索输入文本表单控件”，“数据列”=>4，“占位符”=>“phone'，“size”=>“15”]）
脚本部分
（功能（）{
var dataTable=$（'#dataTable'）。dataTable({
处理：对，
服务器端：是的，
阿贾克斯：{
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
},
url:{{route（“admin.table”）}}，
键入：“post”，
},
栏目：[
{data:null，searchable:false，sortable:false}，
{data:'name'，name:'name'}，
{数据：'城市'，名称：'城市'}，
{数据：'email'，名称：'email'}，
{数据：'phone'，名称：'phone'}，
{数据：'level'，名称：'level'}，
{数据：'actions'，名称：'actions'，可搜索：false，可排序：false，“宽度”：“20%”
],
//订单：[[7，“说明”]]，
搜索延迟：500，
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
$（“td:nth child（1）”，nRow）.html（iDisplayIndex+1）；
返回nRow；
}
});
Backend.DataTableSearch.init（dataTable）；
})();

这是放在过滤器（）上还是放在数据表上以显示整个数据？这是放在过滤器（）上还是放在数据表上以显示整个数据？