How to use dropdown in Datatable when editing inline

Question

I use datatable 1.8 its amazing, I recently read an article about inline editing a data column, Inline editing , in this article about clicking on a hyperlink edit link, data columns become text fields, but my requirement is that I have to show a drop-down list. means that when clicking on editing a hyperlink it should be converted into a drop-down list and should come from my database database, and when saving its values ​​- into the database. How to do it?

Any help would be very helpful to me.

Answer 1

There is a way to get a JSON array to populate the drop-down list the moment you click on the edit link, so you get your JSON through the "full" pretty "successful" attribute of your AJAX call inside "fnServerData" like this:

"fnServerData": function(sSource, aoData, fnCallback, oSettings) { oSettings.jqXHR = $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": "opcionesMenu=ini", "success": fnCallback, "complete": function(resp) { jsonSelects = JSON.parse(resp.responseText); } }); } 

In my example, "jsonSelects" is a global variable where I can get my JSON everywhere inside my code, then I will use my JSON to populate the drop-down list when editing as follows:

 function editRow(oTable, nRow) { var aData = oTable.fnGetData(nRow); var jqTds = $('>td', nRow); //Dropdown list jqTds[2].innerHTML = '<select id="selMenu"></select>'; for(i = 0; i < jsonSelects.menu.length; i++) { $('#selMenu').append('<option value=' + jsonSelects.menu[i].cod_elemento + '>' + jsonSelects.menu[i].nombre_elemento + '</option>'); } //Dropdown list jqTds[3].innerHTML = '<select id="selIdioma"></select>'; for(i = 0; i < jsonSelects.idioma.length; i++) { $('#selIdioma').append('<option value=' + jsonSelects.idioma[i].codigo_idioma + '>' + jsonSelects.idioma[i].nombre_idioma + '</option>'); } // Input text jqTds[4].innerHTML = '<input value="' + aData["opcion"] + '" type="text">'; 

When you click the "Edit" link, you will receive a drop-down list in the fields that you would like.

Answer 2

In my jat data code:

  function editRow(oTable, nRow) { //comes from Razor var model = new Object(); model = insuranceCompanies; var aData = oTable.fnGetData(nRow); var jqTds = $('>td', nRow); jqTds[0].innerHTML = '<input type="text" name="CompanyId" class="form-control input-small" value="' + aData[0] + '">'; jqTds[1].innerHTML = '<select name="Description"></select>'; for (i = 0; i < model.length; i++) { $('#Description').append('<option value=' + model[i].CompanyId + '>' + model[i].CompanyName + '</option>'); } jqTds[2].innerHTML = '<input type="text" name="PolicyNumber" class="form-control input-small" value="' + aData[2] + '">'; jqTds[3].innerHTML = '<input type="text" name="Action" class="form-control input-small" value="' + aData[3] + '">'; jqTds[4].innerHTML = '<a class="edit btn-sm btn-primary" href="">Save</a>'; jqTds[5].innerHTML = '<a class="cancel btn-sm btn-default" href="">Cancel</a>'; } 

In my view:

 @section scripts <script type="text/javascript"> var app_base = '@Url.Content("~/")'; var insuranceCompanies = @Html.Raw(Json.Encode(Model.InsuranceCompanies)); </script> @Scripts.Render("~/ScriptsWithDataTables") @Scripts.Render("~/Scripts/customajax/patient.insurancecompany.js") End Section