Cell data value in table doesn't change from variable

Cell data value in table doesn't change from variable

brian82brian82 Posts: 7Questions: 3Answers: 0

I want to change data value of cell but data doesn't change when using data from variable.

    $('#services-table tbody').on('click', 'td', function () {
        var cell_clicked_value = services_table.cell(this).data();
        var row_index = $(this).closest('tr').index();
        var column_index  = services_table.cell(this).index().column; // row, column, columnVisible
        if (column_index == 3)
            services_table.cell(row_index, column_index).data(cell_clicked_value);
    });

output in console from cell_clicked_value is text like "Some description" and it won't change data in cell.

But when i use it like this services_table.cell(row_index, column_index).data("Some data"); instead of variable i write text it change data.

Answers

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited December 2022

    The value of cell_clicked_value isn't changing so in line 6 its writing the same value.

    You are getting the row_index based on the DOM order of the table with this:

    var row_index = $(this).closest('tr').index();
    

    If that table is sorted this won't be the same as the row().index() Datatables has for the row. Line 6 will likely update a cell in a different row from the clicked row.

    What are you trying to do?

    Kevin

  • brian82brian82 Posts: 7Questions: 3Answers: 0

    I am trying to replace hidden text with full text on click, to be precise make hide/show (toggle) .

    Those cells 3,5,6 have className:"truncate",

    .truncate {
        max-width:150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    

    You can see on image actual output in console

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    I see. The data is there and doesn't need to change. The truncate CSS is just styling the data to look different. All you need to do is remove the truncate class to remove the ellipsis. Maybe something like this:
    http://live.datatables.net/gufejela/1/edit

    I added another class, ellipsis, to the columns to make the event hander selector more specific. The event handle uses jQuery toggleClass() to toggle the truncate class assignment for that cell.

    Kevin

  • brian82brian82 Posts: 7Questions: 3Answers: 0

    @kthorngren thanks this worked as planed

Sign In or Register to comment.