Querying a stylized list with dynatable

 Example to query a table for a certain value:

query from dynamic generated drop down list from the array of objects.


	var dyna = $j('#serverDetails')
	.dynatable({
		dataset: {
			records: window.xData, //array of objects
			perPageDefault: 20
		},
		features: {
			paginate: true,
			sort: true,
			pushState: false, //must be false if not got error
			search: false,
			recordCount: true,
			perPageSelect: true
		},
	}).data('dynatable');


var strOption = '';
	if(!_.isNullOrEmpty(window.xData)) {
		for(var ii = 0; ii < window.xData.length; ii++) {
			var xObj = window.xData[ii];
			strOption += _.fmt(<option&gt;{0}</option&gt;'), xObj.ref_key);
		}
	}
	
	var ddl = '<span style="padding-left:10px;"&gt;'+strOption +'</span&gt;';
	$j(ddl).appendTo('.dynatable-per-page');
	
	
	$j('#hostname').change( function() {
	  var value = $j("#hostname :selected").text();
	  if (value === "") {
		dyna.queries.remove("ref_key");
	  } else {
		dyna.queries.add("ref_key",value);
	  }
	  dyna.process();
	});


<select id="hostname" name="ref_key">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>

Html drop down list generated dynamically:

  • Take note of below 2 steps:
  1. Just put in the DDL name ‘ref_key’ to query: dyna.queries.add(“ref_key”,value);
  2. Refer above to setup the dynatable to query

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.