Contact us for advertisement opportunities on Trending Hub24
📢 Contact Us For Advertise Here | +91 7355993756
Dropdown List To Each Rows Using JQuery Datatable
Add a dropdown,checkbox ,textbox list to each rows with values using jQuery DataTable.
Table of Contents
How to add a dropdown list to each row with values using jQuery DataTable
function BindEmployeeWise(Id, DisplayName, Company) {
if ($.fn.dataTable.isDataTable('#tblDynamicEmployeeContaints')) {
$('#tblDynamicEmployeeContaints').DataTable().destroy();
$('#tblDynamicEmployeeContaints').empty();
}
var vAllEmpIsForm = "<input type=\"checkbox\" class=\"checkAllEmpIsForm\">";
var vAllEmpIsDisplay = "<input type=\"checkbox\" class=\"checkAllEmpIsDisplay\">";
var vAllEmpIsReportDisplay = "<input type=\"checkbox\" class=\"checkAllEmpIsReportDisplay\">";
AjaxGetCall({
url:"Client/DynamicPageEmployeeUiDetails?CmpId=" + Company + "&Id=" + Id +"&Type=FormContents",
success: function (s) {
var Data = s.tableData;
try {
$('#tblDynamicEmployeeContaints').dataTable({
"bDestroy": true,
'bRetrieve': true,
"paging": false,
"info": true,
"ordering": false,
"bAutoWidth": true,
"bScrollAutoCss": true,
"sScrollY": "400px",
"sScrollX": "1100px",
"aaData": Data,
'aoColumns': [
{
"sTitle": "Employee Name", "data": "Emp_Name", "mRender": function (data, type, full) {
var vDisplayName = "<span class=\"cfDisplayEmpname\" id=\"" + full.Id + "," + full.Emp_Id + "\" name=\"cfDisplayEmpname\">" + full.Emp_Name.trim() + "</span>";
return vDisplayName;
}
},
//{ "sTitle": "DB Feild", "data": "DbFeild", "mRender": function (data, type, full) { return full.DbFeild.trim(); } },
{ "sTitle": "Display Name", "data": "DisplayName", "mRender": function (data, type, full) { return full.DisplayName.trim(); } },
//{ "sTitle": "Form Part", "data": "FormPart", "mRender": function (data, type, full) { return full.FormPart.trim(); } },
{
"sTitle": "IsForm Display " + vAllEmpIsForm, "data": "IsForm", "mRender": function (data, type, full) {
var vIsForm = "";
if (full.IsForm == "True" || full.IsForm == "1")
vIsForm = "<input id=\"IsForm_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsForm\" name=\"checkEmpIsForm\" value=\"" + full.DisplayName + "\" checked=\"checked\">";
else
vIsForm = "<input id=\"IsFrom_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsForm\" name=\"checkEmpIsForm\" value=\"" + full.DisplayName + "\">";
return vIsForm;
}
},
{
"sTitle": "IsForm Position", "data": "Position", "mRender": function (data, type, full) {
var vPosition = "<input class=\"form-control cfEmpIsForm allownumericwithdecimal\" name=\"cfEmpIsForm\" type=\"text\" value=\"" + full.FormPosition + "\" placeholder=\"" + full.FormPosition + "\" style=\"width:50px !important;\"><label class=\"errorMessage\" style=\"font-size: 12px; color: red;\"></label>";
return vPosition;
}
},
{
"sTitle": "IsGrid Display " + vAllEmpIsDisplay, "data": "IsDisplay", "mRender": function (data, type, full) {
var IsDisplay = "";
if (full.IsDisplay == "True" || full.IsDisplay == "1")
IsDisplay = "<input id=\"IsGrid_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsGrid\" name=\"checkEmpIsGrid\" value=\"" + full.DisplayName + "\" checked=\"checked\">";
else
IsDisplay = "<input id=\"IsGrid_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsGrid\" name=\"checkEmpIsGrid\" value=\"" + full.DisplayName + "\">";
return IsDisplay;
}
},
{
"sTitle": "IsGrid Position", "data": "IsDisplayPosition", "mRender": function (data, type, full) {
var vIsDisplayPosition = "<input class=\"form-control cfEmpIsGrid allownumericwithdecimal\" name=\"cfEmpIsGrid\" type=\"text\" value=\"" + full.DisplayPosition + "\" placeholder=\"" + full.DisplayPosition + "\" style=\"width:50px !important;\"><label class=\"errorMessage\" style=\"font-size: 12px; color: red;\"></label>";
return vIsDisplayPosition;
}
},
{
"sTitle": "IsReport Display " + vAllEmpIsReportDisplay, "data": "IsReportDisplay", "mRender": function (data, type, full) {
var IsReportDisplay = "";
if (full.IsReportDisplay == "True" || full.IsReportDisplay == "1")
IsReportDisplay = "<input id=\"IsReport_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsReport\" name=\"checkEmpIsReport\" value=\"" + full.DisplayName + "\" checked=\"checked\">";
else
IsReportDisplay = "<input id=\"IsReport_" + full.Id + "\" type=\"checkbox\" class=\"checkEmpIsReport\" name=\"checkEmpIsReport\" value=\"" + full.DisplayName + "\">";
return IsReportDisplay;
}
},
{
"sTitle": "IsReport Position", "data": "IsReportDisplayPosition", "mRender": function (data, type, full) {
var vIsReportDisplayPosition = "<input class=\"form-control cfEmpIsReport allownumericwithdecimal\" name=\"cfEmpIsReport\" type=\"text\" value=\"" + full.ReportDisplayPosition + "\" placeholder=\"" + full.ReportDisplayPosition + "\" style=\"width:50px !important;\"><label class=\"errorMessage\" style=\"font-size: 12px; color: red;\"></label>";
return vIsReportDisplayPosition;
}
},
],
"language": {
"emptyTable": "There are no Candidate at present.",
"zeroRecords": "There were no Candidate customers found.",
"lengthMenu": "Display MENU",
},
});
var ButtonData = "<a id=\"btnUpdateEmpAll\" onclick=\"funUpdateAllEmpData('" + Company + "','" + Id + "','" + DisplayName + "')\" class=\"dt-button buttons-html5 btn btn-primary\" >Update All</a>";
$('#tblDynamicEmployeeContaints_filter').prepend(ButtonData);
}
catch (e) {
console.log(e);
}
finally {
// $(".dataTables_scrollHeadInner").css({ "width": "100%" });
$(".table ").css({ "width": "100%" });
setTimeout(function () {
$("#tblDynamicEmployeeContaints").DataTable().draw()
}, 100);
}
}
});
}