CODEWITHSUNDEEP
javascriptjqueryarraysdatatables
jlimited
jlimited

Reputation: 685

How to add a row with data driven drop down to DataTable

I am trying dynamically add a row to a datatables.net table where the third column is a drop down select.

I been trying various different google searches and have it working for the most part when I use a local variable of "times", but I am not sure how to access the "new_location" data array within the row's data source and populate the drop down options from the "new_location"

The new_location array is an array of objects containing two options of location_id and location_name. I want the drop down to use the location_id as the selected value and display the location_name.

You can test it using any of the following serial numbers: 0111398-0212RV-001 0111398-0212RV-002 0111244-2030RV-001 0111244-2030RV-002 0111244-2030RV-003

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>DataTables - Child rows</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
  
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>




  <style type="text/css">
		.select-item {
			padding: 0 0 0 100px;
			font-weight: bold;
			color: red;
		}
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">
		
/* Formatting function for row details - modify as you need */
function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].serial_num === nameKey) {
            return myArray[i];
        }
    }
}


$(document).ready(function() {

var times = [
	"12:00 am", 
	"1:00 am", 
	"2:00 am", 
	"3:00 am", 
	"4:00 am", 
	"5:00 am", 
	"6:00 am", 
	"7:00 am", 
	"8:00 am", 
	"9:00 am", 
	"10:00 am", 
	"11:00 am", 
	"12:00 pm", 
	"1:00 pm", 
	"2:00 pm", 
	"3:00 pm", 
	"4:00 pm", 
	"5:00 pm", 
	"6:00 pm", 
	"7:00 pm", 
	"8:00 pm", 
	"9:00 pm", 
	"10:00 pm", 
	"11:00 pm"
];

	
    var table2 = $('#example2').DataTable( {
        "columns": [
            { "data": "serial_num" },
            { "data": "location" },
	        	{
	            	"render": function(d,t,r){
	                	var $select = $("<select></select>", {
	                    	"id": r[0]+"start",
	                        "value": d
	                  });
	                	
	                	$.each(times, function(k,v){
	                    	var $option = $("<option></option>", {
	                        	"text": v,
	                            "value": v
	                        });
	                        if(d === v){
	                        	$option.attr("selected", "selected")
	                        }
	                    	$select.append($option);
	                  });
	                  return $select.prop("outerHTML");
	              }
	          }
	      ],
        "order": [[1, 'asc']]
    } );


	 $( function() {
	    $( "#next1" ).click(function() {
	    			var data_details = [{serial_num:"0111244-2030RV-001",location:"Shipped",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"RGA"}]},{serial_num:"0111244-2030RV-002",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111244-2030RV-003",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111398-0212RV-001",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]},{serial_num:"0111398-0212RV-002",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]}];
	    			var x = search($("#serial").val(),data_details);
	    			table2.row.add(x).draw();
	    			
	    		});
	    		

	 });

});


</script>

</head>
<body>
	  <table id="example2" class="display" cellspacing="0" width="100%">
	    <thead>
	        <tr>
	            <th>ID</th>
	            <th>Serial/Lot Number</th>
	            <th>Status</th>
	        </tr>
	    </thead>
	    <tfoot>
	        <tr>
	            <th>ID</th>
	            <th>Serial/Lot Number</th>
	            <th>Status</th>
          </tr>
	    </tfoot>
		</table>
		<br/>
    <br/>
    <input type="text" value="0111398-0212RV-001" id="serial"><button id="next1">Search For Serial</button>

Thanks Jlimited

Upvotes: 0

Views: 828

Answers (1)

jlimited
jlimited

Reputation: 685

I was able to figure it out.

Updated code below.

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>DataTables - Child rows</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
  
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>




  <style type="text/css">
		.select-item {
			padding: 0 0 0 100px;
			font-weight: bold;
			color: red;
		}
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">
		
/* Formatting function for row details - modify as you need */
function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].serial_num === nameKey) {
            return myArray[i];
        }
    }
}


$(document).ready(function() {
	
    var table2 = $('#example2').DataTable( {
        "columns": [
            { "data": "serial_num" },
            { "data": "location" },
	        	{ "data": "new_locations", "autoWidth":true,
	            	"render": function(d,t,r){
	                	var $select = $("<select></select>", {
	                    	"id": r[0]+"start",
	                        "value": d
	                  });
	                	
	                	$.each(d, function(k,v){
	                    	var $option = $("<option></option>", {
	                        	"text": v.location_name,
	                            "value": v.location_id
	                        });
	                        if(d === v){
	                        	$option.attr("selected", "selected")
	                        }
	                    	$select.append($option);
	                  });
	                  return $select.prop("outerHTML");
	              }
	          }
	      ],
        "order": [[1, 'asc']]
    } );


	 $( function() {
	    $( "#next1" ).click(function() {
	    			var data_details = [{serial_num:"0111244-2030RV-001",location:"Shipped",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"RGA"}]},{serial_num:"0111244-2030RV-002",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111244-2030RV-003",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111398-0212RV-001",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]},{serial_num:"0111398-0212RV-002",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]}];
	    			var x = search($("#serial").val(),data_details);
	    			table2.row.add(x).draw();
	    			
	    		});
	    		

	 });

});


</script>

</head>
<body>
	  <table id="example2" class="display" cellspacing="0" width="100%">
	    <thead>
	        <tr>
	            <th>ID</th>
	            <th>Serial/Lot Number</th>
	            <th>Status</th>
	        </tr>
	    </thead>
	    <tfoot>
	        <tr>
	            <th>ID</th>
	            <th>Serial/Lot Number</th>
	            <th>Status</th>
          </tr>
	    </tfoot>
		</table>
		<br/>
    <br/>
    <input type="text" value="0111398-0212RV-001" id="serial"><button id="next1">Search For Serial</button>

Upvotes: 1

Related Questions