modify ajax data return-CodePudding

I have a table that is filled in by an ajax request. The return works fine and return my data exactly how it is in my array.

That's the problem. I want to modify this received data and then show it to the user. Don't care if this is done before data is placed into my table or after.

$(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
        });
    });

How would I approach this. My table displays 'number' as " 441234" because that's what is in my pure data but I'd want to take this return and convert is using a different function in js. Convert it to a more readable human form, like "01234". Same for 'date'. It might return "01-01-2023" but I'd want to take this value and turn it into something else like 1st of January, 2024. How do I take these fields, their data and get to modify it.

Thank you.

CodePudding user response：

You need to use render function for any columns that you want to format/modify. It doesn't matter how data is populated

Using columns.render is the most common method as it provides absolute control over the data that will be displayed to the end user (this is a regular Javascript function, so you can do virtually anything you wish with the data).

The data that is pointed to by columns.data. If columns.data is null, null will be the value given here.
The data type being requested by DataTables - this allows the function to support orthogonal data.
The original and full data object or array for the row.

There are also Build-in helpers for most common types like: data, datetime, number etc.

The built in rendering helpers can be accessed under the DataTable.render object (since 1.11) or $.fn.dataTable.render (which is an alias to the same object).

For example in our case we're using $.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>