如何使用 Javascript 更改数据作为 DataTables 将其显示到 html 表中

Posted 2023-05-09

【中文标题】如何使用 Javascript 更改数据作为 DataTables 将其显示到 html 表中

【英文标题】：How to change data with Javascript as DataTables displays it into a html table

【发布时间】：2021-12-03 18:52:17

【问题描述】：

我对 javascript 非常陌生，我正在努力扩展由第三方实现的代码片段，我必须稍微更改一些数据，然后才能通过 DataTables 将其显示到 html 表中。

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

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

填满数据的 html 表格如下所示：

来自“子字段”列的数据作为一串用逗号分隔的单词（,）显示在表格中，但我想要的是用逗号和一个空格分隔的单词（, ），像这样：

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

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

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

这是将数据显示到 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"  cellspacing="0">
                </table>
            </div>
        </div>
    </div>

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

【问题讨论】：

查看列定义的render method。

【参考方案1】：

已解决

正如@Lapskaus 在 cmets 中所建议的，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'
];

让我得到