Answers

• kthorngren Posts: 21,147Questions: 26Answers: 4,918

  March 2018

  Maybe you can post a description of the issue and what you want the render option to do, your JS code and an example of the JSON response using the browsers Dev Tools as described in this tech note:
  https://datatables.net/manual/tech-notes/1

  Kevin
• YuleLogSean Posts: 3Questions: 1Answers: 0

  March 2018 edited March 2018

  I'm using Cloud Firestore for my database and Firebase Storage for my image URLs.

  So, I'm trying to use the render function to display images in a column. I have been able to pull data from Firestore with no problem, and have access to the item ID from the data source.

      $('#example').dataTable( {
        "columnDefs": [ 
  
      {
          "targets": 0,
          "data": "itemID",
          "render": function ( data ) {
  
          var starsRef = storageRef.child('images/'+data+'.jpg');
  
          starsRef.getDownloadURL().then(function(url) {
  
         //  This is inside an async function, so I don't think I can get the render function to return the URL.
  
          }).catch(function(error) {
  
          }
  
   return '<img src="'+url+'">'
          }
        } ]
      } );
  

  I've tried all kinds of things to get it work, such as writing a function with async/await and calling it within the render function. With that, it just displays [object promise] in the column, so I don't think it will work and I just need to accept the async nature of Firebase Storage.

  I think the obvious solution here is to put the persistent image URLs that Firebase Storage creates upon uploading an image into my Cloud Firestore documents for each item and then I can simply replace "itemID" with "downloadURL" or whatever I call it in my database. I have no problem displaying an image using the render function if I can get an actual URL (and not a promise), I just thought it might be possible to actually find the link using Firebase's getDownloadURL method within Datatables and that I've just overlooked it.
• kthorngren Posts: 21,147Questions: 26Answers: 4,918

  March 2018

  I don't think you will want to perform any async or http operations within the render function. I think its best practice to have all the data ready once you start rendering the Datatable. Its not clear what the source of your data is (DOM, JS, AJAX).

  Do you have a way to get the images with your other data? Then in the render function you can get the image from the data.

  Kevin
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  March 2018

  Agreed - the renderer must be synchronous. You will need to get the data you want first.

  Allan
• YuleLogSean Posts: 3Questions: 1Answers: 0

  March 2018

  Data is Javascript objects from Firestore. I have decided to just write a program to upload photos and save their URLs to my Firestore database.

  This way, the data source has access to the URL and the renderer can simply

  return <img src="url_from_datasource">
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  March 2018

  Can you do console.log( JSON.stringify( Data ) ) for whatever the data is that you are feeding into the database (be it via rows.add() or data).

  Allan
• jay123 Posts: 3Questions: 1Answers: 0

  February 2020

  Kindly @YuleLogSean can you please post the code on how you retrieve data from Firestore and display them in the Datatable