How do I update a "div" class for a specific row on a "click" event?

abhartiya

Hello,

I have been struggling with this for quite some time so any guidance/help is greatly appreciated..

I am initializing a datatable on page load:

table2 =
                            $('#dataTables-example').DataTable( {
                                "bProcessing": true,
                                "destroy": true,
                                "aaData": data,
                                "aoColumns": [
                                    {"mData": "test"},
                                    {
                                        "mRender": function (data, type, full)
                                        {
                                            return '<input class="button" type="button">Create JIRA ticket</input>';
                                        }
                                    },
                                    {
                                        "mRender": function (data, type, full)
                                        {
                                             btn = '<div id="progressi"></div>'
                                            return btn;
                                        }
                                    }
                        ]
                    } );

So, as you can see, I have a column which shows "Create a JIRA ticket" button for each row that gets rendered in the Datatable.

For this button onclick event, I have the following code:

$("#dataTables-example").on("click", ".button", function() {
        var info = table2.row($(this).parents("tr")).data()
          start_long_task(info);
        });

Now, whenever somebody clicks on that button, I am calling the function "start_long_task" and providing the row data as an argument to that function.

This function basically creates a jira ticket in the background (using Celery). I want to be able to show a progress bar as this JIRA ticket is created..so the way I am doing that is:

function start_long_task(info) {
            div = $('<div class="progressi"><div></div><div>0%</div><div>&nbsp;</div></div><hr>');
            $('#progressi').append(div);
            ...using Nanobar, I am creating a progress bar and updating it.this code is working fine...
}

The problem is that the progress bar is only showing up in the first row of the datatable because I am appending the div to the "progressi" div class. And, that is the same for all rows so it just appends to the first "progressi" div class that it sees..

I have tried using the row index but I believe the mRender function does not provide any way to retrieve the row index like its predecessor fnRender??

I can get the current row index (var currow = table2.row($(this).parents("tr")).index()) on the click event and pass it to the "start_long_task" function and also somehow create a different div class for each row by appending the row index to the word "progress". So, instead of the static "progressi" right now, it would be "progress0" for the 1st row, "progress1" for the 2nd row, so on and so forth..

But, how do I get these div classes to render for each row in the mrender function above since there is no way for me to retrieve the row index??

How do I go about this?

Thanks,
Anshuman

abhartiya

So, I figured it out after 2 days of banging my head against this. And, it turns out it is really easy to do this:

This is how my table looks now:

var crow = 0; (global variable)

table2 =
                            $('#dataTables-example').DataTable( {
                                "bProcessing": false,
                                "destroy": true,
                                "aaData": data,
                                "sDefaultContent": "",
                                "aoColumns": [
                                        {"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                var crow = iRow;
                }},
                                    {"mData": "test"},
                                    {
                                        "mRender": function (data, type, full)
                                        {
                                            return '<input class="button" type="button">Create JIRA ticket</input>';
                                        }
                                    },
                                    {
                                        "mRender": function (data, type, full)
                                        {
                                             btn = '<div id="progress' + crow + '"></div>'
                                            crow++;
                                            return btn;
                                        }
                                    }

                        ]
                    } );

So, I am basically using fnCreatedCell to assign the crow value as the current row index as soon as the datatable is created.

Then, on the button click event, the code looks like:

 $("#dataTables-example").on("click", ".button", function() {
        var info = table2.row($(this).parents("tr")).data()
          var currow = table2.row($(this).parents("tr")).index()
          start_long_task(info, currow);
        });

I am basically passing the current row index along with the row data to the start_long_task function.

And, finally, the start_long_task function looks like:

function start_long_task(info, currow) {
            div = $('<div class="progress' + currow+ '"><div></div><div>0%</div><div>&nbsp;</div></div><hr>');
            $('#progress' + currow).append(div);
.......some more code of nanobar to display the progress bar.....

In a nutshell, on each button click event, I am passing the row index along with the row data to a function which in turn starts a background process and then as the tasks get completed, their progress is updated to the div class progress[i] where [i] is the row index of the datatable.

And, when the datatable is first initialized, all the rows are rendered with a div class progress[i] where [i] is the row index of that row derived from the crow value of the fnCreatedCell function and then incremented by 1 by doing a crow++ after each div class.

So, basically the div class of the progress bar ends up corresponding to the div class of the mrender function and it works like a charm!!