Unable to update cell with html anchors content dynamically

Deepa M G

Hello All,

I have a strange problem, Below is my action column of table.

{ "data": "hashed_id","orderable": true, "defaultContent": "",
                        render : function(data,type,row,meta){
                            if (row.processed_status == 0 )
                              {
                     //These are "Accept" and "Reject" links. --- IMPORTANT
                         //this is 7th column
                            return "<div class='row' id='"+row.leave_id+"'>
                                          <div class='col-lg-3 col-md-4 col-sm-12 col-xs-12' >
                                              <a class='process-leave-bymgr' value='1' name='"+row.hashed_id+"'> <i class='far fa-check-circle customizedicon'></i></a> </div>
                                <div class='col-lg-3 col-md-4 col-sm-12 col-xs-12'>
                                    <a class='process-leave-bymgr' value='0' name='"+row.hashed_id+"'>  <i class='far fa-times-circle customizedicon'></i></a>
                          </div></div>";
                              }
                              else
                              {
                                   return row.status;
                              }
                        }
                    }, 

so once i click on the either of link , i want to update cell content with status string. So Ideally i want to replace HTML content with simple string. but below code not working for me.

table.cell('#'+leave_id, 7).data("Accepted Leave").draw(false);

kthorngren

table.cell('#'+leave_id, 7).data("Accepted Leave").draw(false);

Looks like that should work. Tried it here: http://live.datatables.net/gajilive/1/edit

Do you get any errors in your browser's console?

We will need more info to understand where the problem might be. Please provide a link to your page or a test case (update mine if you want) so we can see everything that happens when clicking the link.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Deepa M G

I edited , please have a look.
http://live.datatables.net/gajilive/19/edit.

ignore unloaded fontawesome icons.

On click of the link, string IAMNEWSTRING is not getting updated. However console is working.

colin

Because you're using objects, you nee to do something similar to this example here.

Colin

Deepa M G

@colin Did u meant to say , Store the row data in array, pop last element from array, append string o be added and push to table row again ?. Is it relevant to do so ?

Deepa M G

@colin Helpfull if u could say which part of the example u r saying!.

Are u saying to store entire row data and restore or
Are you telling me about initComplete this function ?

kthorngren

There are two problems with your code. The first is the selector you are using for your cell(): my_table.cell('#'+1, 6).data(.... . '#'+1 is not dynamic to select what you want.

Second problem is you are using columns.render to render the hashed_id column. This is the column you are trying to change with cell().data(). The value will be changed but then the render function runs and changes it back to the link.

I moved the string you are rendering to the columns.defaultContent option. Had to remove the id and name attributes. In the click event I get the closest("td") to the -a tag clicked to get the cell. That cell is then used as the selector for cell().data().
http://live.datatables.net/tecebure/1/edit

Kevin

Deepa M G

Hello @kthorngren ,
Yeah i m aware i used columns.render to render hashed_id.
I some how could understood that , i should use drawCallback API instead of initComplete as you mentioned. So that once i click on the rendered button, its content should update.

Like in this example. http://live.datatables.net/kigebejo/1/edit

How to use drawcallback in my case ?

kthorngren

Not sure I understand what you are wanting to do. When I click the Refresh button I see the Are you sure? button. The reason this button shows is because the cell contains test. I commented out that button and you can see the cell data is changed.
http://live.datatables.net/kigebejo/2/edit

Also note that you had the JS includes in the wrong order and were loading jquery.js twice. I changed the order and removed the 2nd jquery.js. Didn't try your page before fixing the JS order so that may have been your problem as duplicating jquery.js causes issues with Datatables.

Kevin

Deepa M G

Thank you @kthorngren . Yes that answered my question.

I found other solution too. Hope it is feasible , i m sharing it here for somebody in need.

This will update the actual value of the row/cell so after a draw() html content such as buttons or anchor tags will automatically update according to rendered condition.

var row_data = holiday_table.row('#'+holiday_id ).data(); //FETCH row data

row_data['status'] = 0; //Modify data of the cell which you want.

holiday_table.row('#'+holiday_id ).invalidate().draw(row_data); //UPDATE data and redraw table. invalidate() helps here.