loading Template in table cell!

ShahiDev

I'm using data-tables and my requirement is to show 4 custom buttons in cell of each row. If i use render to return the HTML it take too long, it means it adds 3 to 4 second in rendering time of data-table. So i have created a template in which HTML code is present and now i want to load that template in every cell of data-table. I'm using angularJS.
When i load it , it gives me error. any solution for it?
return '<ng-include>" ' file.htm' " </ng-include>'
it shows error on string quotation. syntax error.

The second thing i wana ask is, Is there a way to load 6 columns from data-table and one column from HTML?
Because when i do this it gives me only the column that is in HTML but not data-table columns.
` <tr>
<td>
</td>

               <td>
               </td>

             <td>
             </td>
             <td>
        > > this one will not come from data-table but it should come in last column of data-table.
            </td>
            </tr>`

Any way to do above thing?

allan

I haven't used Angular much, so I'm afraid I can't really provide much help here.

I'm really surprised that using columns.render to return HTML adds 3-4 seconds though! Can you give me a link to a test case showing that please?

Allan

ShahiDev

Yup! It does, I am adding 4 buttons, and when i add them , Time changes from 2 sec to 3.4 ,4 sec. I am kinda invested so if i get some free time on me then i will create a fiddle for you.
Thanks for the reply , but you have not answered the second part of the question. If i want to take 4 columns from Ajax data and one column defined in Html , how can i do that? or it is not possible.
I was thinking to put my buttons in last column and in html <td> tag , but its giving me error. If its possible then it can work out for me.

kthorngren

Having a mix of HTML data and AJAX data isn't supported. Can you post your render function? Maybe you are doing something in the function that is causing the delay.

Assuming you are not using server side processing maybe deferRender would help.

Kevin

ShahiDev

@allan @kthorngren rowCallback was the answer i was looking for. I will post the code snippet here so that someone can use it in future.
I received this answer from @davidkonrad.

rowCallback: function(row) {  
    if (!row.compiled) {
      $compile(angular.element(row))($scope);
      row.compiled = true;  
    }

Now this is out of the picture, let me share my code of my render function so that you can improve it and see what i am doing wrong that is causing the delay.

                                  "render": function ( data, type, full, meta ) { if(meta.col==1)
                                    {
                                        return '  <a class="btn btn-sm btn-default"
                                       title="button" style="margin-top:5px">
                                        <i class="fa fa-area-chart" ng-click = "openDialog(data.userId)"></i>
                                    </a><a class="btn btn-sm btn-default"
                                       title="button" style="margin-top:5px">
                                        <i class="fa fa-area-chart" ng-click = "openDialog(data.userId)"></i>
                                    </a><a class="btn btn-sm btn-default"
                                       title="button" style="margin-top:5px">
                                        <i class="fa fa-area-chart" ng-click = "openDialog(data.userId)"></i>
                                    </a><a class="btn btn-sm btn-default"
                                       title="button" style="margin-top:5px">
                                        <i class="fa fa-area-chart" ng-click = "openDialog(data.userId)"></i>
                                    </a>'  
                                    } }

EDIT: Updated code to use three ticks "```" for code formatting.

kthorngren

I'm not sure what the rowCallback function is doing with compile and whether that is introducing delay.

I see if(meta.col==1) in the render function. Are you applying the render function to more than one column?

It looks like the render function is not using any of the parameter variables to build the returned string. If its a static string as shown above then try assigning the string to the column using columns.defaultContent instead of the render function. That may help reduce the delay.

Kevin

ShahiDev

@kthorngren when i was noticing time, Compile was not added to the datatable. And yes , i am applying render function to more than one column,Because I'm using if condition. Can you explain the defaultContent option, because the link you provided is broken.
And now I'm confused. Can you clarify my confusion? confusion is Why render function causes delay in populating table?
And which approach is better to apply customization to column?
Please fix your defaultContent Option link.

allan

Please fix your defaultContent Option link.

Fixed.

confusion is Why render function causes delay in populating table?

Given that it is returning a static string, there is really no reason why that should be adding seconds to the initialisation of the table. We'd need a link to a page showing the issue so it can be profiled.

Allan

ShahiDev

Thanks @allan @kthorngren. Your answers really helped me.