Question

我仍在学习如何对js和数据表进行编码，并且正在使用ajax进行开发。我在这里有此代码：

        load_data();

         function load_data(is_suppliers)
         {
          var dataTable = $('#product_data').DataTable({
           "processing":true,
           "serverSide":true,
           "order":[],
           "ajax":{
            url:"fetch.php",
            type:"POST",
            data:{is_suppliers:is_suppliers}
           },
           "columnDefs":[
            {
             "targets":[0,5,7,8],
             "orderable":false,
            },
           ],
          });
         }

此功能用于列过滤，并在此处使用以下代码：

         $(document).on('change', '#supplier_filter', function(){
          var supplier = $(this).val();
          $('#product_data').DataTable().destroy();
          if(supplier != '')
          {
           load_data(supplier);
          }
          else
          {
           load_data();
          }
         });

问题在于该函数初始化了数据表：

          var dataTable = $('#product_data').DataTable({});

并且我已经为我的原始操作初始化了数据表，因此我无法使用此代码。如何使用此功能，使其可以与我的操作一起使用？

Answer 1

如果通过函数定义表的ajax数据源，则可以在调用时确定要与AJAX请求一起发送的参数。然后，您可以随时重新加载数据源，并且过滤器的最新值将随有效载荷一起发送。

替换

"ajax":{
  url:"fetch.php",
  type:"POST",
  data:{is_suppliers:is_suppliers}
},

类似

ajax: function(data, callback, _settings) {
  $.ajax({
    type: 'POST',
    url: 'fetch.php',
    data: { is_suppliers: $('#supplier_filter').val() }
  }).then(function(res) {
    callback({ data: res });
  });
},

现在，当表第一次加载时，它将从过滤器控件中获取过滤器值，然后将其作为AJAX请求的一部分发送出去。

稍后，您可以使用再次加载数据

$('#product_data').DataTable().ajax.reload();

那时，它将再次查看过滤器小部件，获取值，并将新值与新的AJAX请求一起发送。

数据表-重新初始化函数中的数据表

1 个答案: