Dynamic Columns - having trouble creating the render function

puffster

https://live.datatables.net/jafuqopi/1/edit?js,console,output

//Experience Name
This is the same as the code below but formatted; get a warning of Bad line breaking before '+'
columns.push({
  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; "
  +   "} "
});

Uncaught TypeError: Cannot read properties of undefined (reading 'function (data, type, full, meta) { var tdVal = ''; var expandID, collapseID; if(lastExp != full')
at c (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3492:40)
at utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3492:109
at Ia.b.fnGetData (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3401:276)
at T (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3406:283)
at fb (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3411:146)
at ia (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3406:1)
at f (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3483:480)
at HTMLTableElement.<anonymous> (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:3484:198)
at Function.each (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:2:3003)
at S.fn.init.each (utilitiesJs?v=jNJb4TuwkExg9_FboJSdFIZ1NA0xblMdG8SmpQRGY4I1:2:1481)

The first six columns of my report are static and will then be followed by up to 15 dynamic columns. I'm trying to just baby step through the dynamic process and for now am just trying to create the first column. The first column will include an icon to display/hide additional rows so I need a render class to modify the image. So far I can create the first column up to the point of trying to include the render. When I add the render and test the code on my desktop I get the console error message above. I've created a test case but for some reason the console is showing a "Script error. (line 0)" message. The test case doesn't like the render either -- if I remove/comment it out the test case runs run. As you will see, I've included several iterations of the code showing what works and what doesn't. I'm hoping I'm just missing something easy...

allan

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

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

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

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

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

...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

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

Allan