Rerender the datatable row after update
Rerender the datatable row after update
Januraj
Posts: 85Questions: 18Answers: 0
i have a datatable with server side implementation
in a row , i have modified some columns on clicking the save button, i need to render the row with latest data
What function i can use to achieve this?
This discussion has been closed.
Replies
Is this using Editor? If not, you'll need to send that data back to the server, since any user operation that generates a draw will mean that data will be replaced with what is on the server. Editor is designed for this - so it would be worth looking at if you aren't using it.
Colin
Since i have to send multiple rows data on click of another button, with normal datatables ,i wanted to re-render only one row , the data for that row is in client side on clicking of row's save button.
In normal datatables can i rerender/update the row
Allan states in this thread:
You will need to send the row to the server to save in then DB then use
draw()orajax.reload()to refresh the table.Kevin
the same question how to do for client side pagination
Client side : Since i have to send multiple rows data on click of another button, with normal datatables ,i wanted to re-render only one row , the data for that row is in client side on clicking of row's save button.
In normal datatables can i rerender/update the row
In your submit event handler use
row().data()to update the row's data thendraw()to redraw the table.Kevin
I tried doing with row().data() , but i am actually creating cells in columns using createdcell(). They are not getting used. It is updating with normal values instead of the values from createdCell
columns.createdCellruns only once, when the cell is created. You will need to userowCallbackwhich will execute each time the row is drawn.Kevin
I am not able to understand the connection between the updating and using rowcallback. Can you provide any example of using rowcallBack, it would be really helpful
This is an editor example but the
rowCallbackoption is used to update the state of the checkbox. If you need an example that is specific to your case then please build a simple running example showing what you have and what you want to update.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
how to call rowcallback() when the row is updated,
like:
1. will rowcallback() gets called on row().data()
2. will rowcallback() gets called on row().data().draw()---- but on using this it is actually making a call to the server (for server side)
2.will rowcallback() gets called on row().data().draw()---- but on using this it is actually making a call to the server (for server side)--- What if u dont want to make a call to server but just update the row
rowCallbackwill execute whendraw()is used or when other functions like searching, sorting or paging cause the table to draw.As we said if you are using server side processing you need to update the data in your server database then use
draw()to fetch the updated row data.Are you using server side processing or client side processing?
Kevin
this is server side but dont want to send the individual row updates to server
so i want to save the individual row's data on client side and on click of another button want to send all the row's data.
---> will rowcallback() gets called on row().data().draw()---- but on using this it is actually making a call to the server (for server side)--- What if u dont want to make a call to server but just update the row
Yes, any draw event like calling
draw(), sorting, searching or paging will send a request to the server for the current page of data. I believe you can update the table display usingrow().data()without thedraw()but none of the callbacks, likerowCallback, will run without a draw event.Here is an example of why this is a problem. A user updates a row and the code displays it using
row().data(). The user searches or sorts the table. The updated data is now gone.Kevin
So there is no way to use the logic which is in createdCell() in any other function in datatables after updating the row without draw. Is it?
As I said before
createdCellruns only once, the first time the cell is created. TherowCallbackwill run each time the table is drawn.Do you need to use server side processing? See this FAQ for some details to decide.
Kevin
Thanks @kthorngren
I tried creating sample
http://live.datatables.net/zizenuga/5/edit
May be u will get what i am trying to tell, in the 3rd column i wanted "status" appended to the value. I am achieving this using createdcell
but after updating the row gets updated but "status" is not getting appended
Can you please help me in resolving this problem
If all you want to do is append the string
'<div class="card_art_group cell_label">"status"</div>'to the data you can usecolumns.render. Looks likecolumns.renderwill run without calling draw.You would use
createdCellif you wanted to dynamically update the cell, for example using jQuery addClass().See this example:
http://live.datatables.net/wilavabi/1/edit
Kevin
Thanks @kthorngren for helping me understand this, but i have one more doubt.
What are the possible values of "display"? for render function of the columns what is the expected return value? is it html or string?
because i am returning listView.render().$el in the render function. it is displaying [object object]
How should i return listView.render().$el
You need to return something that can be display4ed in HTML. Its not a Datatables requirement but what can be displayed by HTML. This w3schools example will provide more details.
Kevin
i think i explained it wrongly.In createdCell inorder to display the same content i used
$(td).html(listView.render().$el); and it was doing it correctly.
The output of listView.render().$el is
"jQuery.fn.init [div]
0: div
length: 1"
but not understanding how to do it using columns render function
Sorry I'm not familiar with
listView.render().$el. Can you update my example to show an example of your data so we can help?Kevin
i think i might not be able to put that in the test case .
the output of the "listView.render().el" is a
(div element).
But on returning this in the render function it is displaying ""[object HTMLDivElement]""
Not the actual div value
You can search for
[object HTMLDivElement]to get some ideas of what you might need to do.Inspect the cell with
[object HTMLDivElement]to see what it looks like. Maybe that will give you an idea of what to do.Without actually seeing an example of your data it would be difficult to provide a solution. I would look at just rendering a string that contains the
divelement like in the example I provided. Maybe the result oflistView.render().elcan be converted to a string for the render function return.Kevin
Thanks kevin for helping me , I will try doing that.