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
– davidkonrad, Commented Jul 23, 2018 at 9:04
OK, I get it but what about the render (hyperlink) in column? @davidkonrad — Lê Tư Thành
– Lê Tư Thành, Commented Jul 23, 2018 at 9:48

Lê Tư Thành · Accepted Answer · 2018-07-23 09:57:10Z

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, 2018 at 9:57

Lê Tư Thành

1,0812 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

Great you figured it out! Remember to mark your answer as accepted. Perhaps it can help future visitors.

Lê Tư Thành Over a year ago

Sure I will, @davidkonrad.

user10120770 · Accepted Answer · 2018-07-23 08:23:15Z

0

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

answered Jul 23, 2018 at 8:23

user10120770

1 Comment

Lê Tư Thành Over a year ago

I think this is also depending on datatables properties. And the way I define like that inside columns option not right.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related