使用新的 JSON 数据重新加载 DataTable 不起作用

Question

我有一个包含数据的 DataTable，也有一个日期过滤器。当我请求具有过滤器值的数据时，相关数据会根据过滤器来。我想根据过滤后的数据更新 DataTable。我尝试了很多代码，但没有一个对我有用。

我的代码：

          $('#pending-appointments-daterange').daterangepicker({
              opens: 'right', 
              showWeekNumbers: true
            }, function(start, end, label) {

              $.ajax({
                type: "GET",
                url: '/get_pending_appointments',
                data: {
                  from: start.format('YYYY-MM-DD'),
                  to: end.format('YYYY-MM-DD')
                }
              })
              .done(function(res) {
                //$('#pending-appointments-datatable').DataTable().destroy();
                //$('#pending-appointments-datatable').DataTable().clear()
                //$('#pending-appointments-datatable').DataTable().ajax.json() = res.dataTableData
                //$('#pending-appointments-datatable').DataTable().clear().draw();
                //$('#pending-appointments-datatable').DataTable().draw();

               $('#pending-appointments-datatable').DataTable().clear().draw();

                //console.log(res)
                //$('#pending-appointments-datatable').url(res).load();
                //$('#pending-appointments-datatable').DataTable().ajax.reload();
              })
              .fail(function(err) {
                console.log(err)
              });

            });

如何使用过滤后的数据重新加载数据表？请帮助我。谢谢。

Answer 1

如果 res 是您的项目数组，您必须清除现有行，然后再次添加行。

          $('#pending-appointments-daterange').daterangepicker({
              opens: 'right', 
              showWeekNumbers: true
            }, function(start, end, label) {

              $.ajax({
                type: "GET",
                url: '/get_pending_appointments',
                data: {
                  from: start.format('YYYY-MM-DD'),
                  to: end.format('YYYY-MM-DD')
                }
              })
              .done(function(res) {

                $('#pending-appointments-datatable').DataTable().clear();
                $('#pending-appointments-datatable').DataTable().rows.add(res);
                $('#pending-appointments-datatable').DataTable().draw();

                //console.log(res)
                //$('#pending-appointments-datatable').url(res).load();
                //$('#pending-appointments-datatable').DataTable().ajax.reload();
              })
              .fail(function(err) {
                console.log(err)
              });

            });