Searchpanes rendering html issue

davidjmorin

Using searchpanes and in one of my columns I have custom HTML being inserted.

{ "data": "completed",
                         "render": function (data, type, row) {
                                                    return (data == 1) ? '<span style="color: Green;"><center><i class="far fa-check-circle"></i></center></span>' : '<span style="color: Tomato;"><center><i class="far fa-times-circle"></i></center></span>';}
                        },

The issue here is that it is showing the html

I tried to create a live table but that did not workout for me. It keeps freezing and crashing chrome .

sandy

Hi @davidjmorin ,

I'm afraid we will have to see a test case to help with this. Are you getting any errors in the console when running the live page?

Thanks,
Sandy

davidjmorin

@sandy No errors at all.

davidjmorin

I got this working with the following.

    columnDefs:[{
      searchPanes:{
        show: true,
        dtOpts:{
          "columnDefs": [ {
            "targets": 0,
                        "render": function(data, type, row, meta) {
                                return data;
                        }
          }]
        }
      },

      targets:[0],

    },

Streit

It does work, but it removes the pills after the text.
Any workaround for that?

sandy

Hi @Streit ,

SearchPanes has it's own render function for adding in the pills, see here. So yes, the render function above will remove those.

If you are seeing a similar output to the original post, please provide a test case so that we can look into the problem. 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.

Thanks,
Sandy

Streit

Hi @sandy
I had the same problem as david and his solution worked for me, but I wanted to keep the pills.
My solution:

searchPanes: {
    dtOpts: {
        "columnDefs": [{
            "targets": 0,
            "render": function(data, type, row, meta) {
                return '<span class="dtsp-name">' + data + '</span><span class="dtsp-pill">' + row.total + '</span>';
            }
        }]
    }
}

This gives me the wanted output.

sandy

Hi @Streit ,

Yes that looks good

Thanks,
Sandy