从服务器获取数据后更新 DataTable 的列

我需要一个解决方案来解决我的问题。我有一个 Django 应用程序，我在服务器端处理中使用 DataTables，表模板对于我拥有的所有模型都是动态的，我只需传递 列 （带有 data ,|| 的字典列表|和 name ）在模板的上下文中，非常简单... title 之后，我需要对列进行一些更改，但根据收到的数据，这意味着我应该能够更新我的列获得数据后在 DataTable 定义中。为了使想法更清晰，以下代码代表我尝试过的尝试之一，使用

def my_page_view(request):
    columns = generate_datatables_columns("MyModel")

    return render(
        request,
        "my_page.html",
        {"columns": columns}
    )

<script>
    $(document).ready(function() {
        var columns = [];
        {% for col in columns %}
            var jsObject = {
                {% for key, value in col.items %}
                    "{{ key }}": "{{ value }}",
                {% endfor %}
            };
            columns.push(jsObject);
        {% endfor %}

        var table = $('#my-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/my/url",
                "type": "GET",
            },
            "columns": columns,
        });
    });
</script>

<table id="my-table" class="display" width="100%">
    <thead>
        <tr>
            {% for column in columns %}
                <th id="dt_col_{{column.data}}">{{ column.name }}</th>
            {% endfor %}
        </tr>
    </thead>
</table>

prop: ajax.dataSrc 使用此方法我找不到更新列的方法，我还尝试了其他方法，例如使用|| |，或自定义 ajax 函数，但我总是陷入死胡同。

var table = $('#my-table').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/my/url",
        "type": "GET",
        "dataSrc": function (json) {
            var data = json.data;
            var newColumns = columns;

            // make changes on data and newColumns variables with some conditions...
            
            // here should update the datatable columns with the value of newColumns.

            return data;
        }
    },
    "columns": columns,
});

如果有人帮助我，我将非常感激。 drawCallback , or custom ajax function, but I always end up with a dead-end.

I will be really grateful if someone helped me with that.

可以使用 DataTables 的 columnDefs 选项和 JavaScript 函数来实现此目的，该函数允许在呈现列时根据从服务器收到的数据动态地修改列。

以下是更新后的代码：

JavaScript:

$(document).ready(function() {
  var columns = [];
  {% for col in columns %}
    var jsObject = {
      {% for key, value in col.items %}
        "{{ key }}": "{{ value }}",
      {% endfor %}
    };
    columns.push(jsObject);
  {% endfor %}

  var table = $('#my-table').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "/my/url",
      "type": "GET",
    },
    "columns": columns,
    "columnDefs": [
      {
        // 遍历所有列
        "targets": "_all",
        "createdCell": function (td, cellData, rowData, row, col) {
          // 在这里，可以访问：
          // - td: 当前单元格的 DOM 元素
          // - cellData: 当前单元格的数据
          // - rowData: 当前行的所有数据
          // - row: 当前行的索引
          // - col: 当前列的索引

          // 根据 rowData 或 cellData 更新列定义
          // 例如，如果 rowData.status === 'inactive'，则将列设为不可见
          if (rowData.status === 'inactive' && col === 2) {
            $(td).parent().addClass('hidden');
          }
        }
      }
    ]
  });
});

解释：

1. columnDefs : 此选项允许定义应用于特定列或所有列的规则。
2. targets : "_all" 表示此规则将应用于所有列。
3. createdCell : 此回调函数在创建每个单元格时都会被调用。它提供了对单元格数据、行数据和列索引的访问。
4. 更新逻辑: 在 createdCell 函数内部，可以编写逻辑来根据从服务器收到的数据 ( rowData 或 cellData ) 更新列定义。例如，可以根据某些条件更改列的可见性、类名或数据。

优点：

• 动态更新： 允许在渲染表时根据服务器响应动态更新列定义。
• 灵活性： 可以使用 JavaScript 函数实现复杂的更新逻辑。
• 性能： 与使用 ajax.dataSrc 相比，此方法通常性能更好，因为它不会操作底层数据源。

注意：

• 确保更新逻辑仅修改与 DataTables 相关的属性（如可见性、类名等）。不要直接修改单元格内容，因为这可能会导致意外行为。
• 此方法仅在创建单元格时有效。如果需要根据后续服务器请求更新列，则需要使用 DataTables API 更新列定义并刷新表。

我希望这可以帮助解决问题！如果有任何其他问题，请告诉我。