修改ajax資料回傳

我有一個由 ajax 請求填寫的表。回傳作業正常，并準確回傳我的資料在我的陣列中的樣子。

那就是問題所在。我想修改這個收到的資料，然后把它展示給用戶。不在乎這是在將資料放入我的表之前還是之后完成的。

$(document).ready(function () {
        var table = $('#List').DataTable({
            "ajax": 'ajax/ajax.php',
            "processing": true,
            "columns": [
                {"data": "Date"},
                {"data": "Number"}
            ],
            "columnDefs": [{
                    "targets": -1,
                    "data": "ID",
                    "width": "20px",
                    "className": "text-center"    
                }], "pageLength": 50
        });
    });

我將如何處理這個問題。我的表顯示'number'為“ 441234”，因為那是我的純資料中的內容，但我想獲得這個回報，并且轉換在 js 中使用不同的函式。將其轉換為更易讀的人類形式，例如"01234"。對'date'. 它可能會回傳“01-01-2023”，但我想取這個值并將其轉換為 2024 年 1 月 1 日之類的其他值。我如何獲取這些欄位、它們的資料并對其進行修改。

謝謝你。

uj5u.com熱心網友回復：

您需要對要格式化/修改的任何列使用渲染功能。資料如何填充并不重要

使用columns.render是最常用的方法，因為它提供了對將顯示給最終用戶的資料的絕對控制（這是一個常規的 Javascript 函式，因此您幾乎可以對資料做任何您想做的事情）。

1. column.data 指向的資料。如果 columns.data 為 null，則 null 將是此處給出的值。
2. DataTables 請求的資料型別——這允許函式支持正交資料。
3. 行的原始和完整資料物件或陣列。

對于最常見的型別 ，也有內置幫助器，例如： data、datetime、number等。

可以在 DataTable.render 物件（自 1.11 起）或 $.fn.dataTable.render（這是同一物件的別名）下訪問內置的渲染助手。

例如在我們的例子中，我們使用$.fn.dataTable.render.number

$('#example').dataTable({
    "data": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "deductions": 100.54,
            "salary": "3120",
            "start_date": "01-01-2023",
            "office": "Edinburgh",
            "extn": 5421
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "deductions": 222.54,
            "salary": "5300",
            "start_date": "02-02-2022",
            "office": "Edinburgh",
            "extn": "8422"
        },
                // ...
    ],
    "columns": [
        {"data": "name"},
        {"data": "position"},
        {"data": "office"},
        {"data": "extn"},
        {"data": "start_date", render: function (data, type, row) {
                const [month, day, year] = data.split('-');
                const date = new Date( year,  month - 1,  day);
                return date.toLocaleDateString('en-ZA', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                });
            }},
        {
            "data": "deductions",
            render: function (data, type, row) {                            
                return "-€ "   data
            }
        },
        {"data": "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$')}
    ]
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<table id="example"></table>

標籤：javascript mysql 阿贾克斯 数据表

上一篇：使用php動態更新嵌套的JSON（未知級別）

下一篇：AjaxPost請求呼叫javascript函式