row().draw() not updating row
row().draw() not updating row
moden
Posts: 11Questions: 4Answers: 0
I am attempting to update a row using row().draw() without success.
The table rendering code is below:
oTableWSItems = $('#tblWorkSheetItems').DataTable({
"drawCallback": function () {
$('.btnItemEdit').on("click", function (e) {
e.preventDefault();
var ws = $("#SelectedWorksheet option:selected").text();
var rowdata = oTableWSItems.row($(this).closest('tr')).data();
itemrow = oTableWSItems.row($(this).closest('tr')).index();
$("#layoutmodal").css("width", "80%");
showModal($('#EditWorksheetItemEndPoint').val() + '?worksheet=' + encodeURIComponent(ws.replace(/\s+/g, ' ').trim()) + '&uii=' + encodeURIComponent(rowdata.UII.trim()) + "&pn=" + encodeURIComponent(rowdata.PN.trim()) + "&sn=" + encodeURIComponent(rowdata.SN).trim());
});
},
serverSide: true,
processing: true,
sortable: false,
fixheader: true,
bInfo: false,
paging: false,
searching: false,
processing: false,
compact: true,
noheader: true,
autoWidth: false,
searchDelay: 10000, //set this to high because we don't want it working
ajax: {
async: true,
type: "POST",
url: $("#GetWorkSheetItemsEndPointName").val(),
datatype: "json",
contentType: "application/json; charset=utf-8",
headers: {
"__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
},
data: function (data) {
data.WorkSheet = vWorkSheet;
data.sort1 = vSort1;
data.sort2 = vSort2;
data.sort3 = vSort3;
data.sort4 = vSort4;
data.sEcho = "echoWorksheetItems";
data.draw = "drawWorksheetItems";
data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
return data = JSON.stringify(data)
},
},
"columnDefs": [{ //this parameter allows you to assign specific options to columns in the table https://datatables.net/reference/option/columnDefs
"targets": [0],
"render": function (data, type, row, meta) {
}
}],
columns: [
{
data: null,
render: function (data, type, row) {
if ( type === 'display') {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
orderable: false
},
{
data: null,
render: function (data, type, row) {
if (type === 'display') {
if (row.Error == null || row.Error == '' || row.Error.toUpperCase() == 'FALSE' || row.Error.toUpperCase() == '0') {
return '<input type="image" class="btnItemEdit" name="btnItemEdit" src="img/checkmark.gif" align="middle" />';
}
else {
return '<input type="image" class="btnItemEdit" name="btnItemEdit" src="img/cancel.gif" align="middle" />';
}
}
return data;
},
className: "dt-body-center",
orderable: false
},
{ "data": "Model", "orderable": false },
{ "data": "PN", "orderable": false, "width": "200px" },
{ "data": "SN", "orderable": false, "width": "200px" },
{ "data": "Nomenclature", "orderable": false, "width": "200px" },
{ "data": "UII", "orderable": false, "width": "200px" },
{ "data": "Status", "orderable": false, "width": "100px" },
{ "data": "NSN", "orderable": false, "width": "100px" },
{ "data": "UCN", "orderable": false, "width": "100px" },
{ "data": "Other", "orderable": false, "width": "100px" },
{
data: null,
render: function (data, type, row) {
if (type === 'display') {
return '<img name="btnAdd_Mark" src="img/add_mark_2.jpg" align="middle" alt="Add Mark" />';
}
return data;
},
className: "dt-body-center",
orderable: false
}
],
select: {
style: 'os',
selector: 'td:not(:last-child)'
}
});
The code to update the row is below:
$('#myModal').on('hidden.bs.modal', function (e) {
//reloadWorksheetItems();
if (modalReturnedObj != null && $.isNumeric(itemrow)) {
oTableWSItems.row(itemrow).cell(0).render('<input type="checkbox" class="editor-active">');
if (modalReturnedObj.Error == null || modalReturnedObj.Error == '' || modalReturnedObj.Error.toUpperCase() == 'FALSE' || modalReturnedObj.Error.toUpperCase() == '0') {
oTableWSItems.row(itemrow).cell(1).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/checkmark.gif" align="middle" />');
}
else {
oTableWSItems.row(itemrow).cell(1).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/cancel.gif" align="middle" />');
}
oTableWSItems.row(itemrow).data().PN = modalReturnedObj.PN || '';
oTableWSItems.row(itemrow).data().SN = modalReturnedObj.SN || '';
oTableWSItems.row(itemrow).data().Nomenclature = modalReturnedObj.Nomenclature || '';
oTableWSItems.row(itemrow).data().UII = modalReturnedObj.UII || '';
oTableWSItems.row(itemrow).data().NSN = modalReturnedObj.NSN || '';
oTableWSItems.row(itemrow).data().UCN = modalReturnedObj.UCN || '';
oTableWSItems.row(itemrow).data().Other = modalReturnedObj.Other || '';
oTableWSItems.row(itemrow).data().Model = modalReturnedObj.Model || '';
oTableWSItems.row(itemrow).data().Status = modalReturnedObj.Status || '';
oTableWSItems.row(itemrow).cell(11).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/cancel.gif" align="middle" />');
oTableWSItems.row(itemrow).draw();
}
});
The error call stack is::
jQuery.event.dispatch@https://localhost:44301/Scripts/jquery-1.10.2.js:5111:0
jQuery.event.add/elemData.handle@https://localhost:44301/Scripts/jquery-1.10.2.js:4780:5
jQuery.event.trigger@https://localhost:44301/Scripts/jquery-1.10.2.js:5021:4
https://localhost:44301/Scripts/jquery-1.10.2.js:5705:3
.each@https://localhost:44301/Scripts/jquery-1.10.2.js:671:13
jQuery.prototype.each@https://localhost:44301/Scripts/jquery-1.10.2.js:280:9
.trigger@https://localhost:44301/Scripts/jquery-1.10.2.js:5704:9
https://localhost:44301/Scripts/bootstrap.js:1092:6
Modal.prototype.backdrop/callbackRemove@https://localhost:44301/Scripts/bootstrap.js:1140:20
.on/fn@https://localhost:44301/Scripts/jquery-1.10.2.js:5659:11
$.event.special.bsTransitionEnd.handle@https://localhost:44301/Scripts/bootstrap.js:72:41
jQuery.event.dispatch@https://localhost:44301/Scripts/jquery-1.10.2.js:5108:14
jQuery.event.add/elemData.handle@https://localhost:44301/Scripts/jquery-1.10.2.js:4780:5
jQuery.event.trigger@https://localhost:44301/Scripts/jquery-1.10.2.js:5021:4
https://localhost:44301/Scripts/jquery-1.10.2.js:5705:3
.each@https://localhost:44301/Scripts/jquery-1.10.2.js:671:13
jQuery.prototype.each@https://localhost:44301/Scripts/jquery-1.10.2.js:280:9
.trigger@https://localhost:44301/Scripts/jquery-1.10.2.js:5704:9
$.fn.emulateTransitionEnd/callback@https://localhost:44301/Scripts/bootstrap.js:58:46
Replies
Since your data object that you are updating from is complete, you can simplify your logic to
Since you are not changing how the cell is rendered, you don't need to rerender.
here is a working example: http://jsbin.com/dohicoc/edit?html,js,output. Select a row and hit the red button.
Are your images showing up for your buttons?
Thank you for your response, however, I am having the same problem after changing my code as suggested.
your button click handler and be pulled completely out of the callback fuction. you may end up with more than one event firing as is.
Something like
after your table is created.
Thank you, bindrids first reply fixed the problem.