Create HTML Table on fly and fill it with dataview using AJAX

Dynamic table generation on base of the dataview filled with data supplied to it and columns.

Table willbe filled with ajax...

.NET Classes used :

# You need to take reference for AJAX.DLL
/***************************************Now put below code in your ASPX file******************/

script type="text/javascript"
code serverside
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBody0 = document.createElement("TBODY");
var oTBody1 = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var oColumns="CategoryId,Name";
var oCaptionString='Created using Document Object Model and AJAX';
var oPlaceHolderId='placetable';
var oTableId='Category'

function AJAXCall() {
var today=new Date();
_Default.GetData(callback).value; //use your class name in place of _Default.
}

function callback(response)
{
var dv=response.value;
FillTable(dv);
}

function FillTable(dataview)
{
DeleteRows(oTableId);
CreateTable(oTableId);
var dv=dataview;
for(var i=0;i {
oRow=document.createElement("TR");
CreateCell(oRow,dv[i].CategoryId,'',false); //PUT PROPER COLUMN-NAME
CreateCell(oRow,dv[i].Name,'',false); // ''
oTBody0.appendChild(oRow);
SetCaption(oCaptionString);
}
}

function CreateTable(tableid)
{
oTable.id=tableid;
oTable.appendChild(oTHead);
oTable.appendChild(oTBody0);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);
document.getElementById(oPlaceHolderId).appendChild(oTable);
InsertHeader(oColumns);
}

function InsertHeader(headerstr)
{
var header=getSplittedString(headerstr,',');
oRow=document.createElement("TR");
for(var j=0;j {
CreateCell(oRow,header[j],'',true);
}
oTHead.appendChild(oRow);
}

function CreateCell(row,text,width,isheader)
{
if(isheader == true)
{ oCell=document.createElement("TH");}
else
{ oCell=document.createElement("TD");}

oCell.innerText=text;
oCell.width=width;
row.appendChild(oCell);
}

function DeleteRows(tableid)
{
try
{
var table=document.getElementById(tableid);
while(true)
{
if(parseInt(table.rows.length) == 0)
break;
table.deleteRow(0);
}
}
catch(ex)
{}
}

function SetCaption(str)
{
oCaption.innerText = str;
}

function getSplittedString(str,separator)
{
var s=str;
var t=s.split(separator);
return t;
}
function text1_onchange() {
AJAXCall();
}

/***************************************Now put below code in your codebehind file******************/
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default)); //put your class name
}
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataView GetData()
{
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ToString());
cn.Open();
SqlDataAdapter ada = new SqlDataAdapter("select * from [categories]", cn);
ada.Fill(dt);
cn.Close();
return dt.DefaultView;
}