How to show image and url?

TotallyNotDaniel · February 2023

Sorry ahead of time but I'm kinda new to all of this. Using the code from this site I made the thing to read my stuff and everything worked. However, I tried to change it to display some extra stuff like images and url format and everything broke. Any help would be appreciated.

Also I don't know how the test case thing works I'm running out of google scripts and the deployment is a blank page.

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function (){
    $('#data').DataTable({
        columns: [
            {"title": "Title"},
            {"title": "Year"},
            {"title": "Authors"},
            {"title":"Link",
              "render": function(data, type, row, meta){
                if(type == 'display'){
                  data = '<a href="' + data + '">' + data + '</a>';
                }
                return data;
              }
            },
            {"title":"Cover",
              "render": function(data, type, row, meta){
                if(type == 'display'){
                  data = <img src="data" alt="Cover" width="500" height="600">
                }
                return data;
              }
            }
        ],
    });
  });
}
</script>

kthorngren · February 2023

In line 22 it looks like you are missing quotes around the string. You will probably see some sort of syntax error in the browser's console. It should look like this:

data = '<img src="data" alt="Cover" width="500" height="600">';

Kevin

TotallyNotDaniel · February 2023

Hmm i changed my code to look the same as yours yet it still doesn't work. I looked at some stuff and they seem to use data to describe columns instead of a title. Could that be causing the issue or should I look for something else?

TotallyNotDaniel · February 2023

dunno how much this wouldhelp but here's like all my code.

gs code:

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData() {
  var spreadSheetId = "111R3KigomNpUkqAheFdD7IAWfIAQnXxz26ri2pEYco4";
  var dataRange = "Data!A1:E";

  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values = range.values;

  return values;
}

//INCLUDE JAVASCRIPT AND CSS FILES
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

index.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">

    <?!= include('JavaScript'); ?><!--INCLUDE JavaScript.html FILE-->
</head>

<body>
    <div class="container">
        <br>
        <div class="row">
            <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
                <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
            </table>
        </div>
    </div>
</body>

</html>

js w/ datatable

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function (){
    $('#data').DataTable({
        columns: [ 
            {"title": "Title"},
            {"title": "Year"},
            {"title": "Authors"},
            {"title": "Link",
              "render": function(data, type, row, meta){
                if(type == 'display'){
                  data = '<a href="' + data + '">' + data + '</a>';
                }
                return data;
              }
            },
            {"title": "Cover",
              "render": function(data, type, row, meta){
                if(type == 'display'){
                  data = '<img src="data" alt="Cover" width="500" height="600">';
                }
                return data;
              }
            }
        ],
    });
  });
}
</script>

colin · February 2023

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

How to show image and url?

How to show image and url?

Answers

Howdy, Stranger!

Categories

DataTables

How to show image and url?

How to show image and url?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables