I have a checkbox on a table, where when that checkbox is selected it will pass data in the "sisa" variable. When in the console log , I have managed to display the "sisa" data. But how to submit the "sisa" data in the input form in the next column ("diterima" column). This checkbox is a multiple selection, so you can select many at once.
the screenshoot:
https://i.postimg.cc/qq7CpVrf/error.png
My datatable
$('#produkTabel').DataTable({
"aaData": response.result,
"columns": [
{
"data": "id", "class": "text-center",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{"data": "produk.item_code"},
{"data": "produk.name"},
{"data": "jumlah", "class": "text-center"},
{"data": "sisa", "class": "text-center"},
{"data": "id", "class": "text-center", render: function ( data,row) {
return '<input type="number" id="inputID" class="open-input form-control bg-white" value="0">';
},},
{
"data": "id",
"class": "text-center",
'searchable': false,
'orderable': false,
render: function ( data, type ,row ) {
if ( type === 'display' ) {
return '<input type="checkbox" data-sisa="'+row.sisa+'" class="editor-active">';
}
return data;
},
className: "dt-body-center"
},
],
"bDestroy": true,
});
My Jquery
$('body').on('change', 'input[type="checkbox"]', function() {
// var tblData = table.rows('.selected').data();
let sisa = $(this).data('sisa');
// console.log(tblData);
// var inputForm = $(this).'input[type="number"]';
// $('.open-input').val(sisa);
// this.checked ? inputForm.val(sisa) : inputForm.val(0);
console.log(sisa);
});
$("#inputID").val(sisa);
Try this in your script....sorry if am wrong
Related
I have been working with datatables for a couple of weeks and I have this custom datatables that I'm identifying by class (tableIdentifyClass):
var handleDataTable = function () {
if ($("." + tableIdentifyClass).length) {
table = $("." + tableIdentifyClass).DataTable({
aaData: dataForTable,
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
"order": [[1, "asc"]],
"bAutoWidth": false,
"lengthChange": false,
"columnDefs": [{
"targets": 0,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<span class="fa-xs"><i class="fa fa-edit" style="font-size:125%" onclick:""></i></span>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 2,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (data != '')
return '<span class="fa-xs"><i class="fa ' + data + '" style="font-size:125%"></i></span>';
else return '<span>-</span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 3,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<a class="fa-xs"><i class="fa fa-times" style="font-size: 125%; color: red;" onclick="deletePrefLocally(' + full.UId + ',' + full.Id + ',\'' + tableIdentifyClass + '\')"></i></a>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
}]
});
}
}
The data for the table (dataForTable):
[ { "Icon": "fa-exclamation-circle", "IsDefault": true, "Name": "Nixon", "UId": 1 },
{ "Icon": "fa-exclamation-circle", "IsDefault": false, "Name": "Tiger", "UId": 2 }]
I'm trying to delete the second row by calling function deletePrefLocally
function deletePrefLocally(uId, deletedId, tableIdentifyClass) {
var crtUsage = dataForTable; //same items as the table
var inItems = crtUsage.filter(function (elem) {
return elem.Id === deletedId; // find the item with the same id
})[0];
var found = crtUsage.indexOf(inItems);
if (found != -1) crtUsage.splice(found, 1);
table = $("." + tableIdentifyClass);
datatable = table.DataTable();
datatable.clear();
datatable.rows.add(crtUsage).draw();
}
My problem is that the last row datatable.rows.add(crtUsage).draw(); pops-up a message: DataTables warning: - Request unknows parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Why is not applying the new content? Why after closing the error box I have two search areas and paging and all the values are null? What am I doing wrong?
You've defined "IsDefault" twice in your column list.
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
I suspect you meant to have "UId" for the last one, as that is included in the data.
Found the reason... After all the page was loaded I've checked if based on tableIdentifyClass I'll receive true after calling $.fn.DataTable.isDataTable( '.' + tableIdentifyClass) but it was false. When calling datatable = table.DataTable(); I was creating a datatable inside the existing one, duplicate search area and paging :( I've tried to save all the "tables" after initialization inside an global array and search for it in order to add the new rows. Perhaps this is not the best solution but it worked for me.
I have a datatable which is getting populated by an ajax call. Following is the code:
oTable = $('#lenderList').dataTable(
{
bServerSide: true,
bProcessing: true,
searching: true,
sAjaxSource: "loanAdminAjax?ajax=true&searchCol="+$('#category').val(),
sServerMethod: 'POST',
sPaginationType: "full_numbers",
columnDefs:[
{
targets:8,
checkboxes:{
selectrow:true
}
}
],
aoColumns: [
{
"sName": "loanApplicationNumber",
mData: "loanApplicationNumber"
},
{
"sName": "name",
mData: "name"
},
{
"sName": "submissionDate",
mData: "submissionDate"
},
{
"sName": "kycEmailId",
mData: "kycEmailId"
},
{
"sName": "appVersion",
mData: "appVersion"
},
{
"sName": "documentStatus",
mData: "documentStatus"
},
{
"sName": "latestRemark",
mData: "latestRemark"
},
{
"sName": "appName",
mData: "appName"
},
{
nData: "salaryTransaction",
render: function ( salaryTransaction, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return salaryTransaction;
},
className: "dt-body-center"
}
],
dom: '<"button">lfrtip'
}
);
});
I have to consider all the loan application numbers of the respective rows whose checkboxes are checked by the user. So I can trigger an event on Click of a button but how can I get the values of Loan Application Number of those rows whose checkboxes are clicked.
I am new to javaScript. Please let me know how this can be achieved.
I have this idea : Loop through all the rows of the table, and test if the checkbox of that row is checked or not. If it is, then extract the value of the needed cell!
Try this :
$(document).ready(function(){
$("button").click(function(){
oTable = $("#lenderList").dataTable(); // Get the datatable,
var loanApplicationNumbers = []; // An array that will contain the "loan application numbers"
oTable.$('tr').each(function(index,rowhtml){ //Loop through the table rows
//Check the state of the checkbox
var checked= $('input[type="checkbox"]:checked',rowhtml).length;
if (checked==1){
//If the checkbox is checked, then add the inner text of the cell to the array
loanApplicationNumbers.push(rowhtml.children[1].innerText);
}
});
console.log(loanApplicationNumbers); //Do whatever you want
});
});
Note : rowhtml.children is an Array of cells in that row, if you want to get the value of the first cell, you should do rowhtml.children[0].innerText .
we coding a quotation form for our company and want to add products a datatable and changing value on it. After change data we send to controller but they same the first time. Here is datatable structure.
var selectedProduct = $('#selectedproduct').DataTable({
"columns": [
{
"orderable": false,
"data": "IsConfirm",
},
{ "orderable": false, "data": "Product.Id" },
{ "orderable": false, "data": "Product.Name" },
{ "orderable": false, "data": "Product.Description" },
{
"orderable": false,
"data": "Quantity",
"render": function (data, type, full, meta) {
return '<td width="100px"><input class="touchspinquantity" type="text" value="' + data + '" name="quantity"></td>';
}
},
{ "orderable": false, "data": "Product.SalePrice" },
{
"orderable": false,
"data": "Discount",
"render": function (data, type, full, meta) {
return '<td width="100px"><input class="touchspindiscount" type="text" value="' + data + '" name="discount"></td>';
}
},
{ "orderable": false, "data": "Product.Currency" },
{ "orderable": false, "data": null, "defaultContent": '' },
{
"orderable": false,
"data": null,
"defaultContent": '<button id="deleteproduct" class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
},
],
"createdRow": function (row, data, index) {
if (data.IsConfirm) {
$('td', row).eq(0).html('<input type="checkbox" checked class="i-checks" name="input[]">');
}
else {
$('td', row).eq(0).html('<input type="checkbox" class="i-checks" name="input[]">');
}
},
"searching": false,
"paging": false,
"bInfo": false,
"ordering": false
});
Here is how to get data
var datat = table.fnGetData();
You may need to redraw the datatable after the updation
selectedProduct.draw();
I solved problem but maybe that's not good way.
Here is the solve
var rows = table.fnGetNodes();
var arr = [[]];
for (var i = 0; i < rows.length; i++) {
var detaildata = [];
var cells = rows[i].cells;
detaildata[0] = cells[0].childNodes["0"].checked;
detaildata[1] = cells[1].innerText;
detaildata[2] = cells[2].innerText;
detaildata[3] = cells[3].innerText;
detaildata[4] = cells[4].firstChild.childNodes[1].value;
detaildata[5] = cells[5].innerText;
detaildata[6] = cells[6].firstChild.childNodes[1].value;
detaildata[7] = cells[7].innerText;
detaildata[8] = cells[8].innerText;
arr[[i]] = detaildata;
//var select = cells[0].children[0].value;
//if (cells[0].children[0].checked) {
// select = cells[0].children[0].value;
//} else {
// select = 'off';
//}
}
I need to pass the Value of the first column into the second column render function() to make a hyperlink where the value of the first column is parameter. of the hyperlink.
"Columns": [
{
"data": "Code", "autoWidth": true,
},
{ "data" : "StyleReference","autoWidth": true,
"render": function (data, oObj) {
return '' + data + '';
}
}
]
Any Help Please!!
You're nearly there. The render function can take up to 4 variables. Your row represents the whole object, this should work:
"columns": [{
"data": "Code",
"autoWidth": true
}, {
"data": "StyleReference",
"autoWidth": true,
"render": function(data, type, row, meta) {
return '' + data + '';
}
}]
Hope that helps.
Have a datatable and using the drill down row. The top row populate data but the link to drill down to the additional row contains a undefined object and I'm stuck right there.
Any help would be so appreciated. oData.code (undefinded) / oData itself will return everything from the linq query but when I start using the oData.etc... the object becomes undefined. Even in the click event I've tried to access oData and drop it in the second TD row and it to is also undefined.
function fnFormatDetails(oTable, nTr)
{
var oData = oTable.fnGetData(nTr);
var sOut =
'<div>' +
'<table>' +
'<tr><td> '+oData.code+' </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>'
'</table>' +
'</div>';
return sOut;
} //end fnFormatDetails function
$(document).ready(function ()
{
var anOpen = [];
var oTable = $('#VADataTable').dataTable(
{
"sDom": 'T<"clear">lfrtip',
"oTableTools":
{
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}, //flash must be enabled
"iDisplayLength": 5, //defalut amount of rows shown on page
"bServerSide": false, //uses sever for filter curently turned off
"bFilter": false, //makes columns clickable to filter
"bProcessing": true,
"bserverSide":false,
"bJQueryUI": true, //enables user interface
"bSort": true, //sorting for columns
"bScrollInfinite": true, //using this takes away ddl of selection
"sAjaxSource": "Data/IndustryTable", //where ajax commands renders results
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"fnRowCallback": function (nRow, aData)
{
if (aData[0] == "")
{
$('td:eq(0)', nRow).html("+").addClass('control');
}
return nRow;
}, //ends fnRowCallback
"aoColumns":
[
{ "sName": "code", "sTitle": "Code" },
{ "sName": "code" },
{ "sName": "data" },
{ "sName": "data" },
{ "sName": "data" },
{ "sName": "data" },
{ "sName": "data" }
]
});
$('#VADataTable td.control').live('click', function ()
{
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
if (i === -1)
{
$('td').attr('+');
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div', nDetailsRow).slideDown();
anOpen.push(nTr);
} //end if
else
{
$('td').attr('-');
$('div', $(nTr).next()[0]).slideUp(function ()
{
oTable.fnClose(nTr);
anOpen.splice(i, 1);
}); //ends slideUp
} //ends else
$('#new tr').after('<td> '+ typeof(oTable.code) +' </td>');
}); //ends click event
} //ends live event
)//ends ready function
I believe that just add the "mData" property in "aoColumns", that is the name of fields of database table, and in "fnRowCallback" you must replace "aData[0]" by "aData['code']" like the next example:
"fnRowCallback": function (nRow, aData)
{
if (aData['code'] == "")
{
$('td:eq(0)', nRow).html("+").addClass('control');
}
return nRow;
}, //ends fnRowCallback
"aoColumns":
[
{ "mData" : "code", "sName": "code", "sTitle": "Code" },
{ "mData" : "code", "sName": "code" },
{ "mData" : "data", "sName": "data" },
{ "mData" : "data", "sName": "data" },
{ "mData" : "data", "sName": "data" },
{ "mData" : "data", "sName": "data" },
{ "mData" : "data", "sName": "data" }
]