Answers

• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  August 2023

  render: "function (data, type, full, meta) { "

  That's a string. It looks like you want a function. You could you eval() to resolve your string into a real Javascript function, but I'd strongly recommend against it.

  Are you loading JSON data that includes the function or something? Or is there some other reason the function is wrapped up as a string?

  Allan
• puffster Posts: 61Questions: 22Answers: 0

  August 2023

  Initially I was creating the columns in the datatable definition like below and everything was working great. But with the report changing from a known number of columns to a dynamic number I'm just trying to mimic creating the columns like below...

          var expTable = $('#aolExperiences_experience').DataTable({
              info: false,
              searching: false,
              ordering: false,
              paging: false,
              scrollX: true,
              scrollY: '55vh',
              scrollCollapse: true,
              buttons: ['csvHtml5', 'excelHtml5', 'pdfHtml5', 'print'],
              dom: 'Btp',
              data: exp,
              columns: columns,
                  [
                  {
                      className: "text-nowrap experience-details bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
                          var expandID, collapseID;
  
                          if (lastExp != full.expName) {
                              expandID = "expandExperience" + full.expID;
                              collapseID = "collapseExperience" + full.expID;
  
                              tdVal = '<span class="' + expandID + ' fa fa-plus-square" style="color: green; cursor: pointer"></span>&nbsp;'
                                  + '<span class="' + collapseID + ' fa fa-minus-square" style="color: red; cursor: pointer; display: none"></span>&nbsp;'
                                  + data.expName;
                          }
  
                          return tdVal;
                      }
                  },
                  ]
  
• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  August 2023

  That code looks fine. Are you Ajax loading a string that contains a function or something? I'm going to need more information to be able to offer any help...

  Allan
• puffster Posts: 61Questions: 22Answers: 0

  August 2023

  I'm developing in asp.net and using Web Services to pull in my data. When this project was initially developed I was pulling in columns for a testName, toDate, fromDate, and 10 schools and everything worked great. Here's the complete layout for the original development of the table:

          //Convert to a datatable
          var lastExp = '';
          var expTable = $('#aolExperiences_experience').DataTable({
              info: false,
              searching: false,
              ordering: false,
              paging: false,
              scrollX: true,
              scrollY: '55vh',
              scrollCollapse: true,
              buttons: ['csvHtml5', 'excelHtml5', 'pdfHtml5', 'print'],
              dom: 'Btp',
              data: exp,
              columns: [
                  {
                      className: "text-nowrap experience-details bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
                          var expandID, collapseID;
  
                          if (lastExp != full.expName) {
                              expandID = "expandExperience" + full.expID;
                              collapseID = "collapseExperience" + full.expID;
  
                              tdVal = '<span class="' + expandID + ' fa fa-plus-square" style="color: green; cursor: pointer"></span>&nbsp;'
                                  + '<span class="' + collapseID + ' fa fa-minus-square" style="color: red; cursor: pointer; display: none"></span>&nbsp;'
                                  + data.expName;
                          }
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center text-nowrap bottomBorder",
                      data: "startOfMonth",
                  },
                  {
                      className: "text-center text-nowrap bottomBorder",
                      data: "endOfMonth",
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[0].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[1].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[2].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[3].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[4].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[5].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[6].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[7].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[8].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
                  {
                      className: "text-center bottomBorder",
                      data: null,
                      render: function (data, type, full, meta) {
                          var tdVal = "";
  
                          tdVal = data.school[9].pctExperiences + '%';
  
                          return tdVal;
                      }
                  },
              ],
              createdRow: function (row, data, dataIndex) {
                  //For the initial display, we want to hide all experience records for prior months
                  //so if the experience on this record is the same as the experience as the last record hide it
                  if (lastExp != data.expName) {
                      $(row).addClass("currentMonthExperienceRow");
                      bgColor = (bgColor == 'roseLight') ? 'roseLighter' : 'roseLight';
                  }
                  else {
                      var lid = "previousMonthExperienceRow" + data.expID;
  
                      $(row).addClass("previousMonthExperienceRow");
                      $(row).addClass(lid);
                      $(row).css("display", "none");
                  }
  
                  $(row).addClass(bgColor);
  
                  lastExp = data.expName;
              }
          });
  

  The users changed their mind though and want the ability to pick which schools they see, so now I could be loading anywhere from 1 to 10 schools. When this happened and I was testing against the code above sending in only 1 school, the code above errored out for Column 4 because that data no longer existed.

  It was at this point that I began to try to switch over to creating the columns dynamically, and that's the product you see in the datatables link in my original post. I need that render created for the first column, and I don't know how to do that dynamically. That's my problem in a nutshell.
• puffster Posts: 61Questions: 22Answers: 0

  August 2023

  I guess I should also note, the data coming in from web services is just the data -- it doesn't have anything to do with creating a datatable. You are correct, I was trying to construct the function as a string because I thought once it was translated it would be read by datatables as a function. I'm still a novice when it comes to developing in javascript and datatables and don't understand all the nuances. I'm just trying to figure out how to pass in a render function as a part of my dynamic data.
• puffster Posts: 61Questions: 22Answers: 0

  August 2023

  ...and just like that I figured it out -- as I was typing all that out it dawned on me that I may be able to pass in an actual function in my array, which I guess I can. I assumed that would not be allowed and that's why I was encapsulating it as a string. I just removed the strings from around the function in my test case and that worked...

  Thanks for being patient and helping guide me to the answer
• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  August 2023

  Good stuff - great to hear you got it working as needed

  Allan