From 2655c633e67aec8c7695586af33c875e0fbad508 Mon Sep 17 00:00:00 2001 From: Gagan Bansal Date: Fri, 4 Oct 2019 05:24:28 +0000 Subject: [PATCH] Added option for HTML5 datalist input --- example/advanced.html | 13 +++++++ example/advanced.js | 17 +++++++-- js/dataTables.cellEdit.js | 80 +++++++++++++++++++++++++++++---------- 3 files changed, 87 insertions(+), 23 deletions(-) diff --git a/example/advanced.html b/example/advanced.html index e13cab1..883e130 100644 --- a/example/advanced.html +++ b/example/advanced.html @@ -52,6 +52,7 @@ First Name Last Name DOB + City @@ -59,61 +60,73 @@ Elliott Beaty 01/14/2011 + New York Joe Dirt 01/14/2004 + London John Doe 01/14/2003 + Mumbai Jane Doe 01/11/2001 + Sydney Billy Bob 02/14/1947 + New York Bobby Axlerod 01/27/2001 + London Elliott Beaty 01/13/2007 + Mumbai Joe Dirt 01/14/2001 + Sydney John Doe 01/14/2001 + New York Jane Doe 01/14/2001 + London Billy Bob 01/14/2001 + Mumbai Bobby Axlerod 01/14/2001 + Sydney diff --git a/example/advanced.js b/example/advanced.js index 076260a..2c6c6ef 100644 --- a/example/advanced.js +++ b/example/advanced.js @@ -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" } + ] + } ] }); @@ -53,4 +64,4 @@ function destroyTable() { table.destroy(); table.MakeCellsEditable("destroy"); } -} \ No newline at end of file +} diff --git a/js/dataTables.cellEdit.js b/js/dataTables.cellEdit.js index 7b0448b..f92da80 100644 --- a/js/dataTables.cellEdit.js +++ b/js/dataTables.cellEdit.js @@ -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) { @@ -183,6 +183,46 @@ function getInputHtml(currentColumnIndex, settings, oldValue) { input.html = input.html + " Confirm Cancel" + endWrapperHtml; input.focus = false; break; + case "datalist": + if (!startWrapperHtml) { + startWrapperHtml = '
' + endWrapperHtml = '
' + } + input.html = startWrapperHtml + ""; + input.html = input.html + ""; + input.html = input.html + ""; + + $.each(inputSetting.options, function (index, option) { + if (oldValue == option.value) { + input.html = input.html + ""; + input.html = input.html + endWrapperHtml; + input.focus = true; + break; + case "datalist-confirm": // DataList w/ confirm + if (!startWrapperHtml) { + startWrapperHtml = '
' + endWrapperHtml = '
' + } + input.html = startWrapperHtml + ""; + input.html = input.html + ""; + input.html = input.html + ""; + + $.each(inputSetting.options, function (index, option) { + if (oldValue == option.value) { + input.html = input.html + ""; + input.html = input.html + " Confirm Cancel"+ 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 @@ -190,23 +230,23 @@ function getInputHtml(currentColumnIndex, settings, oldValue) { 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 + "  Confirm Cancel" + 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 + "  Confirm Cancel" + 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 + " Confirm Cancel" + endWrapperHtml; break; @@ -217,9 +257,9 @@ function getInputHtml(currentColumnIndex, settings, oldValue) { case "textarea-confirm": input.html = startWrapperHtml + "Confirm Cancel" + endWrapperHtml; break; - case "number-confirm" : - input.html = startWrapperHtml + " Confirm Cancel" + endWrapperHtml; - break; + case "number-confirm" : + input.html = startWrapperHtml + " Confirm Cancel" + endWrapperHtml; + break; default: // text input input.html = startWrapperHtml + "" + endWrapperHtml; break;