使用搜索重绘数据表

Question

我正在使用 DataTables。我在页面加载时添加了以下代码，并且 table 按预期获取所有数据。

        var table = $('#expensesTable').DataTable({
            responsive: true,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            ajax: {
                url: '/books/daybooks/datatable',
                type: 'POST',
            },
            columns: [
                {data: 'expense_id'},
                {data: 'expense_date'},
                {data: 'expense_description'},
                {data: 'expense_amount'},
                {data: 'vendor_name'},
            ],
       });

现在，我添加了一个日期范围选择器，它将在服务器中搜索数据，响应将通过 Ajax 返回给查询。

        $('#datepicker').on('apply.daterangepicker', function(ev, picker) {

            var start = picker.startDate.format('YYYY-MM-DD');
            var end = picker.endDate.format('YYYY-MM-DD');

            jQuery.ajax({
                type: "POST",
                url: '/books/daybooks/datatable',
                data: {start : start, end : end},
                success: function(data)
                {
                    console.log(data);
                } // Success End
            }); //AJAX End
          });

现在我成功获得了所有预期的过滤数据，但现在我需要在 Ajax 调用过滤后用新获得的 data 重绘 table。

如果我使用 $('#expensesTable').DataTable().draw(); 那么它会在没有过滤器的情况下进行绘制，

所以我可以用过滤数据绘制 table？

提前致谢。

Answer 1

您可以在提交日期范围过滤器时重新使用现有的 DataTables ajax 调用，而不是引入新的 ajax 调用（jQuery ajax）数据。

为此，您需要执行以下步骤：

(1) 更新您的 DataTables ajax 选项：

ajax: {
  url: '/books/daybooks/datatable',
  type: 'POST',
  data: function () {
    return { "start": start, "end" end };
  }
},

此 data 函数允许您为您的请求动态分配值。它们将作为标准 URL 编码的表单数据添加，以 POST 请求的通常方式添加。

有关详细信息，请参阅 here。 ajax.data 有几种不同的使用方法。例如，如果您正在使用 serverSide 处理（您没有使用），那么上述方法将无法正常工作。

(2) 要重新使用您的 DataTables ajax 调用，您可以使用：

table.ajax.reload();

有关详细信息，请参阅 here。

这将取代您的 jQuery ajax 呼叫：

var start;
var end;

$('#datepicker').on('apply.daterangepicker', function(ev, picker) {
  start = picker.startDate.format('YYYY-MM-DD');
  end = picker.endDate.format('YYYY-MM-DD');
  table.ajax.reload(); 
});

当 table 首次加载时（不使用 reload()），过滤器值将为空。

使用搜索重绘数据表

Redraw datatables with search

ajax

datatables