Editor: Can not get createdRow to work

asle

I have a table where one of the fields is a comment. Since this comment can be long I have truncated it with this code

<style>
 table.dataTable.compact tbody td {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     }
</style>

Then I want to add a title= to the <td> and use Tippy.js to display the long text in a tooltip.
I read (and thought I understood) the working example from this post but when I try it on my own page it does nothing. Here I have tried to enter it on the example page from the demos:
.../examples/inline-editing/simple.html

I have tried to add the createdRow at the beginning and the end of the datatables declaration. I can not see any "title" attribute created on the <td>s.

    $('#example').DataTable( {
        createdRow: function (row, data, rowIndex) {
                          // Per-cell function to do whatever needed with cells
                          $.each($('td', row), function (colIndex) {
                              // For example, adding data-* attributes to the cell
                              $(this).attr('title', data[colIndex]); console.log('createdRow is working');
                          });
                        },
        dom: "Bfrtip",
        ajax: "../../controllers/staff.php",
        order: [[ 1, 'asc' ]],
        columns: [.....

kthorngren

One option is to use the Ellipsis display plugin. It displays the full text when hovering. Here is an example:
http://live.datatables.net/qireduxu/1/edit

If you prefer to use Tippy.js then please build a test case so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

asle

Wow Kevin, you guys just never sleep! I try first to find an answer but this one is hard. First I have to solve the problem with getting the <td> to show the content in a title attribute. Then I can work on getting e.g. Tippy.js to show the tooltip. Here is an example I put up:
https://wilfavarmepumpe.no/editor-php/examples/inline-editing/simple2.html

The button at the bottom has a title text and that is showing as a tooltip so tippy.js is working. I have set the code for createdRow as in my example above. I do not have long texts in this example as I only want to create a title attribute now.

If I check console it outputs undefined for data[colIndex]

createdRow: function (row, data, rowIndex) {
        $.each($('td', row), function (colIndex) {
        $(this).attr('title', data[colIndex]); console.log(data[colIndex]);
          });
        },

I have also tested createdCell on cell 4 and this returns the correct content in console and seems to add the title="This is a tooltip from content..." to the <td>

    columnDefs: [
           {targets: 4,
             createdCell: function(td, cellData, rowData, row, col){
              if (cellData != '') {
               $(td).attr('title', cellData); console.log(cellData);
            }
            }} ]

I have a table here where the <td> has a title attribute and tippy.js is working fine.
https://wilfavarmepumpe.no/demo/tipp.html

Sorry for so many questions buty can you see what I am doing wrong?

allan

Your data is in object form - e.g.:

{
  firstName: 'Allan'
}

So array index access (data[colIndex]) isn't going to work - it is undefined as you are seeing. You need to use data.firstName (etc).

I've be tempted to use createdCell like in your second post, since it will give you the data without needing to worry about array or object access.

Allan

asle

So looping over each <td> will not work then beacause I have assigned each cell under columns: like { data: "first_name" }, ? Not sure why.

I still have the problem with tippy tooltip not working even if datatable creates the "title='.....'" for the <td>. But I guess this is not datatables fault? Also I am using css to truncate the text. Is it better to use the datatables approach with e.g. Ellipsis renderer? I was concerned I would not get the non-truncated text in the tooltip.

asle

I still wonder if there is something in datatables that prevents the tooltip from working on a <td> (in datatables of course). This page https://wilfavarmepumpe.no/demo/tipp.html has the same content with a title attribute and tooltip works fine there. But not here and wonder why...
https://wilfavarmepumpe.no/editor-php/examples/inline-editing/simple2.html

kthorngren

The problem is the td elements used as the tippy() selector are not in the DOM when the tippy initializer runs. First Ajax is an asynchronous process so Datatables is still waiting for the ajax response when tippy is initialized. Second Datatables only palces the rows displayed on the page into the DOM. The rest are in the Datatables data cache. Use drawCallback to apply tippy to the rows in the DOM for each draw, like this:
http://live.datatables.net/noruzaka/1/edit

Kevin

asle

Thanks Kevin! It works and I am learning. I guess this is a big reason things don't work when the order of loading is not correct. A function trying to do something on an object that is not loaded. You need some experience to see that!
I am still using the createdCell in columnDefs instead of the createdRow separately. Is there any reason for one over the other approach?

columnDefs: [
            {targets: 8,
                createdCell: function(td, cellData, rowData, row, col){
                    if (cellData != '') {
                        $(td).attr('title', cellData); console.log(cellData);
                    }
                }}, 

Again thanks for saving my dag :-)

kthorngren

Take a look at the Conflict resolution section of the columnDefs docs for details.

The idea with columnDefs is to provide the same configuration for multiple columns. Or if the columns option is not used. However in your case its fine as long as the columns option doesn't also have columns.render. Depending on how you want to document and maintain your code you can leave it as is or move it to the appropriate columns column.

Kevin

asle

Aha, so now I have also learned where to put code for every or for specific cells. For the columns Option one must define every column, but not if using the columnDefs Option !