如何使用 Javascript 更改数据，因为 DataTables 将其显示为 html table

Question

我是 Javascript 的新手，我正在努力扩展由第三方实现的代码片段，我必须稍微更改一些数据才能显示为 html table 通过 DataTables.

特别是，数据来自 Postgres 数据库 table 的列“嵌套字段”和“子字段”，声明为：

CREATE TABLE testing_nested_field_blacklist (
    nested_field    varchar(100) NOT NULL UNIQUE,
    subfields       varchar(100)[] NOT NULL
);

填满数据的htmltable是这样的：

来自“子字段”列的数据在 table 中显示为由逗号分隔的单词字符串 (,)，但我想要的是用逗号分隔的单词和一个 space (, ) ，像这样：

为了得到这个，我正在考虑

构建一个函数，给定一个字符串作为输入，替换逗号和逗号-space 和 returns 作为输出
将函数放入 for 循环中，将替换应用于列“子字段”的元素对于 table 的每一行，我会将此函数放在加载脚本的末尾数据进入table。这样它也会在“刷新”、“添加”、“编辑”和 “删除”功能被触发。

但是，我不知道如何获取和更改数据。
任何人都可以指出正确的方向吗？

这是将数据显示到 html 模板中的 javascript 代码段：

var NestedFieldTable;
var nested_field_to_remove = {};
var nested_field;

    $(document).ready(function() {
    
        // NESTED FIELD
        NestedFieldTable = $('#NestedFieldTable').DataTable({
            "destroy": true,
            "processing":true,
            "ajax":  {
                "url": '/getNestedFields/',
                "type":"POST",
                "dataSrc": "nested_field"
            },
            "columns": columns_nested_field,
            "columnDefs": [
                {"targets": -1, "data": null, "defaultContent": "<i class='fas fa-edit' aria-hidden='true' id='modifyRow' data-toggle='modal' data-target='#myModalEditNestedField' title='click to edit nested field or blacklist'></i><i style='margin-left:15px;' class='fas fa-trash' aria-hidden='true' id='deleteRow' data-toggle='modal' data-target='#myModalDeleteNestedField'  title='Click to delete nested field and blacklist'></i>", "width": "75px"},
            ],
            "dom":  "<'row'<'col-md-6 toolbar_nestedfield'><'col-md-6'fBl>>" +
                    "<'row'<'col-md-6'><'col-md-6'>>" +
                    "<'row'<'col-md-12't>><'row'<'col-md-12'pi>>",
            "buttons": [
                {
                    extend: 'collection',
                    text: 'Export',
                    autoClose: true,
                    buttons: [
                        {
                            text: '<i class="fas fa-print"></i> Print',
                            extend: 'print',
                            messageTop: 'Table of subfields and nested field .',
                            footer: false
                        }
                    ]
                },
                {
                    text: '<i class="fas fa-sync-alt"></i>',
                    titleAttr: 'Refresh table',
                    action: function ( e, dt) {
                        dt.ajax.reload();
                        set_alert_message({"title":"Refresh", "detail":"Table successfully refreshed"}, "success");
                    }
                }
            ],
            "language": {
                "searchPlaceholder": "Search",
                "search": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-search fa-fw'></i></span></div>_INPUT_</div></div>",
                "lengthMenu": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-list-ul fa-fw'></i></span></div>_MENU_</div></div>",
                "oPaginate": {
                    sNext: '<span class="pagination-default">&#x276f;</span>',
                    sPrevious: '<span class="pagination-default">&#x276e;</span>'
                }
            }
        });
        $(".toolbar_nestedfield").html('<button type="button" class="dt-button" title="click to add new nested field and blacklist" data-toggle="modal" data-target="#myModalAddNestedField"><i class="fas fa-plus"></i></button>');

这是定义表格列的 javascript 段代码，它是使 DataTables 工作所必需的：

var columns_nested_field = [
    { "title":"Nested field", data: "nested_field"},
    { "title":"Subfields blacklist", data: "subfields"},
    { "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];

这是 html 模板：

<!-- Begin Page Content -->
<div class="container-fluid">

    <ol class="breadcrumb shadow-lg">
        <li class="breadcrumb-item">
            <a href="/4testing/">Home</a>
        </li>
        <li class="breadcrumb-item active">Nested fields and subfields blacklists</li>
    </ol>

    <!-- alert messages -->
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong id="alert-success-title"></strong> <div id="alert-success-detail"></div>
    </div>

    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong id="alert-danger-title"></strong> <div id="alert-danger-detail"></div>
    </div>

    <!-- TABELLA NESTED FIELDS -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ban" aria-hidden="true"></i> Nested fields and subfields blacklists</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="NestedFieldTable" width="100%" cellspacing="0">
                </table>
            </div>
        </div>
    </div>

</div>
<!-- /.container-fluid -->

Answer 1

已解决

正如@Lapskaus 在评论中所建议的那样，DataTables 显示的数据可以使用 columns.render 方法进行操作。

在我的例子中，我必须对数组的所有元素应用相同的更改（让 subfields 列的每个单元格都包含一个数组），所以我使用了 Array-access render method.

我将元素键值 render: "[my-separator]" 添加到对象

{ "title":"Subfields blacklist", data: "subfields"}

变量 columns_nested_field，对应于我要操作其数据的列（"render": "[my-separator]" 也适用）。

并且因为我想要 , 作为分隔符，所以我将我的变量

var columns_nested_field = [
    { "title":"Nested field", data: "nested_field"},
    { "title":"Subfields blacklist", data: "subfields"},
    { "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];

进入

var columns_nested_field = [
    { "title":"Nested field", data: "nested_field"},
    { "title":"Subfields blacklist", data: "subfields", render: "[, ]"}, // <-- added the render key
    { "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];

所以我得到

如何使用 Javascript 更改数据，因为 DataTables 将其显示为 html table

How to change data with Javascript as DataTables displays it into a html table

javascript

jquery

datatables