How can replace space in json data to _ and add hyperlink for each row with datatables?

Question

I want to customize JSON data from back-end before show it with datatables. First I want to replace the spaces ( ) in column artist.name with underscore symbol (_). Then, I want to hyperlink each row in that column with a wiki link like my code.

HTML:

        <table id="albums" class="table table-striped table-bordered" style="width:100%" >
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Artist</th>
                    <th>Album name</th>
                    <th>Year</th>
                    <th>Genres</th>
                </tr>
            </thead>
        </table>

Datatables-JS:

"columns": [
        {"data": "rank", "searchable": false},
        {
            "data": "artist.name".replace(/\s+/g, '_'),      // ex: 'The Beatles' => 'The_Beatles'
            "name": "artist.name".replace(/\s+/g, '_'),

            "render": function (data, name) {

                    data = '<a href= "https://en.wikipedia.org/wiki/' + name + '">' + name + '</a>';  // render to: https://en.wikipedia.org/wiki/The_Beatles

                return data;
            } 
        },
        {"data": "name"},
        {"data": "year"},
        {"data": "genres", "name": "genres.name", "sortable": false},
    ]

JSON data:

{
"data": [
    {
        "DT_RowId": "row_1",
        "DT_RowAttr": {
            "data-pk": 1
        },
        "rank": 1,
        "name": "Sgt. Pepper's Lonely Hearts Club Band",
        "year": 1967,
        "artist_name": "The Beatles",
        "genres": "Psychedelic Rock, Rock & Roll",
        "artist": {
            "id": 2,
            "name": "The Beatles"
        }
    },
    {
        "DT_RowId": "row_2",
        "DT_RowAttr": {
            "data-pk": 2
        },
        "rank": 2,
        "name": "Pet Sounds",
        "year": 1966,
        "artist_name": "The Beach Boys",
        "genres": "Pop Rock, Psychedelic Rock",
        "artist": {
            "id": 3,
            "name": "The Beach Boys"
        }
    }  
    ...      
],
"recordsFiltered": 15,
"recordsTotal": 15,
"draw": 1

}

It does not work. Can anyone help me? Thanks.

It does not make sense. Why would you change the `data` attribute to a none existing property? There is no `The_Beatles` property in the JSON. The result would be an error. And even if there were a `The_Beatles` index it does not add up, since you would in fact try to change the `name` or `title` of the column multiple times according to row data. **Columns can only have *one* title and *one* name**. — davidkonrad, Jul 23 '18 at 09:04
OK, I get it but what about the `render` (hyperlink) in `column`? @davidkonrad — Lê Tư Thành, Jul 23 '18 at 09:48

score 1 · Accepted Answer · answered Jul 23 '18 at 09:57

1

OK, thanks, everyone. I fixed it with this change.

"columns": [
        {"data": "rank", "searchable": false},            
        {
            "data": "artist.name",      
            "name": "artist.name",
            "render": function (data, type, row, meta) {
                data = '<a href= "https://en.wikipedia.org/wiki/' + data.split(' ').join('_') + '">' + data + '</a>';
                return data;
            }           
        },
        {"data": "name"},
        {"data": "year"},
        {"data": "genres", "name": "genres.name", "sortable": false},
    ]

answered Jul 23 '18 at 09:57

Lê Tư Thành

1,063
2
10
19

Great you figured it out! Remember to mark your answer as accepted. Perhaps it can help future visitors. – davidkonrad Jul 24 '18 at 17:59
Sure I will, @davidkonrad. – Lê Tư Thành Jul 25 '18 at 02:11

score 0 · Answer 2 · answered Jul 23 '18 at 08:23

0

You can use .replace(/ /g,"_"); or .split(' ').join('_'); functions for that as answered here: Replacing spaces with underscores in JavaScript?

answered Jul 23 '18 at 08:23

I think this is also depending on datatables properties. And the way I define like that inside `columns` option not right. – Lê Tư Thành Jul 23 '18 at 08:30

How can replace space in json data to _ and add hyperlink for each row with datatables?

2 Answers2