asked on

Make datatable fields editable

I have working code that pulls from server into a datatable and displays correctly. What I haven't been able to figure out is how to make my data editable. Doesn't need to update the server, just be able to edit the table. I will export to excel when done with edits. Here is what I have:

Provides a dropdown to select item to search by

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset='utf-8'>

	<title>Test</title>

 	<cfinvoke component="Comp/Process" method="readTestTable" returnvariable="qList" />
 
  	<cfset lcListDropDown = '<select name="ItemA" id="ItemA"><option value="0" selected>Please Choose a ItemA</option>'>
  	<cfloop query='qList'>
  		<cfset lcListDropDown = lcListDropDown & '<option value="' & qList.ItemA & '"> ' & qList.ItemA & ' </option>' >
  	</cfloop>
  	<cfset lcListDropDown = lcListDropDown &'</select>'>   
  
</head>

	<body onLoad="" onUnload="">
		
	  <div id="content_body">
	   
	    </div>
	    
	      <h1>Test Search</h1>
	        <form name="TestSearch" id="TestSearch" action="TestDataTable.cfm" method="post">
	      
	        <table align="center" border="1" cellspacing="0" cellpadding="3" id="SearchTable">
	          <caption>
	          	Enter search criteria, then press the <b>Start Search</b> button.
	          </caption>
	          <cfoutput>
	            <tr>
	              <th>ItemA</th>
	            </tr>
	            <tr>
	              <td align="center" class="tdclass" valign="bottom">
	                #lcListDropDown#
	              </td>
	             </tr>
	           </cfoutput>
	        </table>       
	        
	        <p align="center">
	          <input name="btnsubmit" type="submit" class="btnsubmit" value="Start Search">
	          <input name="btnreset" type="reset" class="btnsubmit" value="Reset">
	        </p>
	      </form>
	
	  </div>
	
	</body>
</html>

Open in new window

This part to display the data

<!DOCTYPE html>
<html lang="en-US">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta charset='utf-8'>
	
		<title>Test Details</title>

<cfparam name="Form.ItemA" default="">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css">

</head>
	<body onLoad="" onUnload="">
	
	    <div id="content_top">
	      <h1>Test Data</h1>
		</div>
			
			<div id="ItemContainer" class="gridContainer">
				<table id="tblItem" class="display" style="width:100%">
			        <thead>
			            <tr>
			              <th>ItemA</th>
			              <th>Name</th>
			              <th>Type</th>
			              <th>Location</th>
			            </tr>
			        </thead>
			        <tfoot>
			            <tr>
			              <th>ItemA</th>
			              <th>Name</th>
			              <th>Type</th>
			              <th>Location</th>
			            </tr>
			        </tfoot>
			    </table>
	
	  		</div>
  	    
		 <cfinclude template="TestDataTableJS.cfm" />  

	</body>

</html>

Open in new window

And the Call to the server to retrieve the data and input to datatable

<script type="text/javascript">

	$(document).ready(function(){
	"use strict";
		
		var dtItem = $('#tblItem').DataTable({
			ajax: "Comp/Process.cfc?method=ItemData&returnFormat=json<cfoutput>&ItemA=#FORM.ItemA#</cfoutput>"
		
			, buttons: [
				{ text: 'New Search', action: function() {
					// open in same window
					window.open('Test.cfm', '_self');
					}
				}
				,'excel','print','copy'
				
				,{ text: 'Refresh',	action: function() {
						dtItem.ajax.reload( null, true ); // true = user paging is reset on reload
					}
				}
			,
				
			]
			
			, columns: [ 
				{data: "ItemA"}
				,{data: "Name", type: 'text', edit: true}
				,{data: "Type"}
				,{data: "Location" }
			
			 /*end columns*/

			]
			
		});
		/* end document.ready function*/
	});
</script>

Open in new window

Been searching for example that I can use with my code but not working. Was trying http://jsfiddle.net/5L2qy092/7/ but not working.
new to JavaScript and ColdFusion

leakim971

what miss on the following example?
https://editor.datatables.net/examples/inline-editing/simple

MadIce

ASKER

Doesn't the editor have to be purchased to work? If so, I would have to get approval and wait a few months.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

Doesn't the editor have to be purchased to work?

Yes, you also have a trial

MadIce

ASKER

leakim971, thanks for reply. I did tried that. nothing changes. I also added from "initComplete" to the end with nothing different. I did change #Example to #tblItem. not sure if I need to change something else.

leakim971

I did tried that. nothing changes

try it twice, it work (click on second column)

MadIce

ASKER

I have download that code and got it to work. Just not able to get it to work with my code.

leakim971

"that code" is not "mine", I used a click on second column fields to show the popup

lenamtl

Hi,

I can tell you, using their editor is the way to go to be able to use all Datatables features with inline form.

I'm using Datatables every day, I do prefer to have my forms outside the table, this is a lot easier and this save a lot of time.
So when I edit an item it's opening a new page and display the form.

Using popup or inline form inside the table can be hard to use on small device especially if the form is long.
If you are planning to use responsive feature, user need to extend the row to see hidden field,
Plus it add a lot more work to use the filters

So this is depending of your needs.

Datatables have different way to process the table :
The regular way (I'm using this way and append my table with JS) and server-side way (you may want to use this way if there is a lot of data)
You can use server side language with the regular way, is just they have other way to process with a lot of data, this can be confusing because of the name.
https://datatables.net/examples/data_sources/server_side

MadIce

ASKER

Thank you for the help. I used the link that leakim971 provided. It's basically the same code as the link in my question. Not sure what the problem was but I started over with the code from the link and inputted my code where needed. It worked the second time around. Must of left something out.