格式化服务器端jQuery Datatable

Question

I am trying to format the front end look of my jQuery DataTable

I currently have it looking like this https://imgur.com/a/PPgL48Y

I need the repeating items in each row to be remove for example in the first row there are 2 Owner 1's. I only want to display a single Owner 1 in that row.

The other issue is in row 2, Url1 is followed by a comma then Url 2 but i want

Url1
Url2

In the row, so removing the comma and adding a new line in that col

My data is being collected via server side processing

My current jQuery code

<script type="text/javascript" >

         $('#result').DataTable({
            "serverSide":true,
            "filter": false,
            "orderMulti": false,
            "ajax": "DetailedSearch?handler=ServerSideDataTable",
            "columns":[
                {"data": "location", 
                 "render": function(data,type,row){
                     return row.location;
                 }
                },
                {"data": "contactAndRole", 
                 "render": function(data,type,row){
                     return data.key + " - " + data.value;
                 }},
                {"data": "server", "sortable": "false"},
                {"data": "urls", 
                 "render": function(data,type,row){
                     return row.urls + '<br>';
                 }
                }
            ],
             rowGroup:{
                dataSrc:'appName'
            }
        });

</script>

Can i add some html elements? like a br after each url, or can the table be constructed with pure html then passed onto data tables to output?

I've looked into the HTML templates, and standalone documentation on the data tables website but nothing seems to be helpful.

Answer 1

The commas for the url's array are because of the default way arrays are processed to strings to be printed into the html in the dom

You could join() them yourself using a <br> separator instead

return row.urls.join('<br/>')