Jquery | How to create/edit Jquery Datatable dynamically

Author - Parminder Kaur

How to create/edit Jquery Datatable dynamically?

HTML code:

<div class="col-md-12 col-sm-12 col-xs-12">
<table id="table">
<tbody>
<tr>
<th>Rules</th>
</tr>
</tbody>
</table>
</div>
<button id="go">Go</button>

Here is the javascript function:

function addData()
{
var data=[this array contains all the values that we need to show in table];
keys=Object.keys(data);
var dataTable = $('#table').DataTable();
  	   	dataTable.destroy();
  	 	$("#tablebody").find("tr").remove();
  	 	var tBody = document.getElementById("tablebody");
  	 	for(i=0;i<keys.length;i++)
  	 	{
  		var row = tBody.insertRow(i);
                row.id = "tablerow"+keys[i];
	        var cell = row.insertCell(0);
  cell.innerHTML = "+data[keys[i]]+""; } $('#table').DataTable(); }

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *