Skip to content

Commit

Permalink
Added option for HTML5 datalist input
Browse files Browse the repository at this point in the history
  • Loading branch information
@gagan-bansal
gagan-bansal committed Oct 4, 2019
1 parent e6d9ab5 commit 2655c63
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 23 deletions.
13 changes: 13 additions & 0 deletions example/advanced.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,68 +52,81 @@
<th>First Name</th>
<th>Last Name</th>
<th>DOB</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elliott</td>
<td>Beaty</td>
<td>01/14/2011</td>
<td>New York</td>
</tr>
<tr>
<td>Joe</td>
<td>Dirt</td>
<td>01/14/2004</td>
<td>London</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>01/14/2003</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>01/11/2001</td>
<td>Sydney</td>
</tr>
<tr>
<td>Billy</td>
<td>Bob</td>
<td>02/14/1947</td>
<td>New York</td>
</tr>
<tr>
<td>Bobby</td>
<td>Axlerod</td>
<td>01/27/2001</td>
<td>London</td>
</tr>
<tr>
<td>Elliott</td>
<td>Beaty</td>
<td>01/13/2007</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Joe</td>
<td>Dirt</td>
<td>01/14/2001</td>
<td>Sydney</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>01/14/2001</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>01/14/2001</td>
<td>London</td>
</tr>
<tr>
<td>Billy</td>
<td>Bob</td>
<td>01/14/2001</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Bobby</td>
<td>Axlerod</td>
<td>01/14/2001</td>
<td>Sydney</td>
</tr>
</tbody>
</table>
Expand Down
17 changes: 14 additions & 3 deletions example/advanced.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,20 @@ $(document).ready(function () {
"options": {
"icon": "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" // Optional
}
}
},
// Nothing specified for column 3 so it will default to text

{
"column":3,
"type": "datalist",
"options":[
{ "value": "New York" },
{ "value": "London, UK" },
{ "value": "London, Canada" },
{ "value": "Mumbai" },
{ "value": "New Delhi" },
{ "value": "Sydney" }
]
}
]
});

Expand All @@ -53,4 +64,4 @@ function destroyTable() {
table.destroy();
table.MakeCellsEditable("destroy");
}
}
}
80 changes: 60 additions & 20 deletions js/dataTables.cellEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,13 +135,13 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
input = {"focus":true,"html":null};

if(settings.inputTypes){
$.each(settings.inputTypes, function (index, setting) {
if (setting.column == currentColumnIndex) {
inputSetting = setting;
inputType = inputSetting.type.toLowerCase();
}
});
}
$.each(settings.inputTypes, function (index, setting) {
if (setting.column == currentColumnIndex) {
inputSetting = setting;
inputType = inputSetting.type.toLowerCase();
}
});
}

if (settings.inputCss) { inputCss = settings.inputCss; }
if (settings.wrapperHtml) {
Expand Down Expand Up @@ -183,30 +183,70 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
input.html = input.html + "</select>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.focus = false;
break;
case "datalist":
if (!startWrapperHtml) {
startWrapperHtml = '<div>'
endWrapperHtml = '</div>'
}
input.html = startWrapperHtml + "<input id='ejbeatycelledit' list='datalist-" + currentColumnIndex + "' class='" + inputCss + "' value='" + oldValue + "' onfocusout='$(this).updateEditableCell(this);'>";
input.html = input.html + "</input>";
input.html = input.html + "<datalist id='datalist-" + currentColumnIndex + "'>";

$.each(inputSetting.options, function (index, option) {
if (oldValue == option.value) {
input.html = input.html + "<option value='" + option.value + "'>"
} else {
input.html = input.html + "<option value='" + option.value + "' >"
}
});
input.html = input.html + "</datalist>";
input.html = input.html + endWrapperHtml;
input.focus = true;
break;
case "datalist-confirm": // DataList w/ confirm
if (!startWrapperHtml) {
startWrapperHtml = '<div>'
endWrapperHtml = '</div>'
}
input.html = startWrapperHtml + "<input id='ejbeatycelledit' list='datalist-" + currentColumnIndex + "' class='" + inputCss + "' value='" + oldValue + "'>";
input.html = input.html + "</input>";
input.html = input.html + "<datalist id='datalist-" + currentColumnIndex + "'>";

$.each(inputSetting.options, function (index, option) {
if (oldValue == option.value) {
input.html = input.html + "<option value='" + option.value + "' selected>"
} else {
input.html = input.html + "<option value='" + option.value + "' >"
}
});
input.html = input.html + "</datalist>";
input.html = input.html + "&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>"+ endWrapperHtml;
input.focus = true;
break;
case "datepicker": //Both datepicker options work best when confirming the values
case "datepicker-confirm":
// Makesure jQuery UI is loaded on the page
if (typeof jQuery.ui == 'undefined') {
alert("jQuery UI is required for the DatePicker control but it is not loaded on the page!");
break;
}
jQuery(".datepick").datepicker("destroy");
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss + "' value='" + oldValue + "'></input> &nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
setTimeout(function () { //Set timeout to allow the script to write the input.html before triggering the datepicker
var icon = "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif";
jQuery(".datepick").datepicker("destroy");
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss + "' value='" + oldValue + "'></input> &nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
setTimeout(function () { //Set timeout to allow the script to write the input.html before triggering the datepicker
var icon = "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif";
// Allow the user to provide icon
if (typeof inputSetting.options !== 'undefined' && typeof inputSetting.options.icon !== 'undefined') {
icon = inputSetting.options.icon;
}
var self = jQuery('.datepick').datepicker(
if (typeof inputSetting.options !== 'undefined' && typeof inputSetting.options.icon !== 'undefined') {
icon = inputSetting.options.icon;
}
var self = jQuery('.datepick').datepicker(
{
showOn: "button",
buttonImage: icon,
buttonImageOnly: true,
buttonText: "Select date"
});
},100);
break;
},100);
break;
case "text-confirm": // text input w/ confirm
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "' value='"+oldValue+"'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
Expand All @@ -217,9 +257,9 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
case "textarea-confirm":
input.html = startWrapperHtml + "<textarea id='ejbeatycelledit' class='" + inputCss + "'>"+oldValue+"</textarea><a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
case "number-confirm" :
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='number' class='" + inputCss + "' value='"+oldValue+"'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
case "number-confirm" :
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='number' class='" + inputCss + "' value='"+oldValue+"'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
default: // text input
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "' onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "'></input>" + endWrapperHtml;
break;
Expand Down

0 comments on commit 2655c63

Please sign in to comment.