Datatable to html Table

Question

I have question  that maybe someone here wouldn t mind to help me with  I have lets say 3 datatables  each one of them has the following columns  size  quantity  amount  duration Name of datatables and values LivingRoom                  1 1 1 1 2 2 2 2  BathRoom                  3 3 3 3 4 4 4 4  BedRoom                   5 5 5 5 6 6 6 6  Now i am trying to build an html invoice to were i can loop through all the datatables and output the following html output  very basic   lt table gt     lt tr gt       lt td gt Area lt  td gt     lt  tr gt     lt tr gt       lt td gt Living Room lt  td gt     lt  tr gt      lt tr gt       lt td gt Size lt  td gt       lt td gt Quantity lt  td gt       lt td gt Amount lt  td gt       lt td gt Duration lt  td gt     lt  tr gt     lt tr gt       lt td gt 1 lt  td gt       lt td gt 1 lt  td gt       lt td gt 1 lt  td gt       lt td gt 1 lt  td gt     lt  tr gt     lt tr gt       lt td gt 2 lt  td gt       lt td gt 2 lt  td gt       lt td gt 2 lt  td gt       lt td gt 2 lt  td gt     lt  tr gt      lt tr gt       lt td gt Area lt  td gt     lt  tr gt     lt tr gt       lt td gt Bathroom lt  td gt     lt  tr gt      lt tr gt       lt td gt Size lt  td gt       lt td gt Quantity lt  td gt       lt td gt Amount lt  td gt       lt td gt Duration lt  td gt     lt  tr gt     lt tr gt       lt td gt 3 lt  td gt       lt td gt 3 lt  td gt       lt td gt 3 lt  td gt       lt td gt 3 lt  td gt     lt  tr gt     lt tr gt       lt td gt 4 lt  td gt       lt td gt 4 lt  td gt       lt td gt 4 lt  td gt       lt td gt 4 lt  td gt     lt  tr gt      lt tr gt       lt td gt Area lt  td gt     lt  tr gt     lt tr gt       lt td gt Bedroom lt  td gt     lt  tr gt      lt tr gt       lt td gt Size lt  td gt       lt td gt Quantity lt  td gt       lt td gt Amount lt  td gt       lt td gt Duration lt  td gt     lt  tr gt     lt tr gt       lt td gt 5 lt  td gt       lt td gt 5 lt  td gt       lt td gt 5 lt  td gt       lt td gt 5 lt  td gt     lt  tr gt     lt tr gt       lt td gt 6 lt  td gt       lt td gt 6 lt  td gt       lt td gt 6 lt  td gt       lt td gt 6 lt  td gt     lt  tr gt   lt  table gt   So pretty much the area would have the name of the datatable  and then under each area loop that specific datatable and output the datat in that format  I can t figure out the looping logic or how to do this  i ve been breaking my head for the last few days on this  maybe i m just thinking about it in the wrong way but i could really use some help on this

User · Answer

As per my understanding you need to show 3 tables data in one html table using asp.net with c#.

I think best you just create one dataset with 3 DataTable object.

Bind that dataset to GriView directly on page load.

User · Answer

From this link  using System  using System Collections Generic  using System Data  using System Globalization  using System Text  using System Xml   namespace ClientUtil   public class DataTableUtil    public static string DataTableToXmlString DataTable dtData    if  dtData    null    dtData Columns Count    0  return  string  null  DataColumn   primaryKey   dtData PrimaryKey  StringBuilder stringBuilder   new StringBuilder    stringBuilder Append     lt TABLE gt       stringBuilder Append     lt TR gt       foreach  DataColumn dataColumn in  InternalDataCollectionBase  dtData Columns    if  DataTableUtil IsPrimaryKey dataColumn ColumnName  primaryKey   stringBuilder Append     lt TH IsPK    true    ColType       Append Convert ToString dataColumn DataType    typeof  object     object  typeof  string     object  dataColumn DataType   Append        gt      Append dataColumn ColumnName Replace     amp               Append     lt  TH gt       else stringBuilder Append     lt TH IsPK    false    ColType       Append Convert ToString dataColumn DataType    typeof  object     object  typeof  string     object  dataColumn DataType   Append        gt      Append dataColumn ColumnName Replace     amp               Append     lt  TH gt         stringBuilder Append     lt  TR gt       int num1   0  foreach  DataRow dataRow in  InternalDataCollectionBase  dtData Rows    stringBuilder Append     lt TR gt       int num2   0  foreach  DataColumn dataColumn in  InternalDataCollectionBase  dtData Columns    string str   Convert IsDBNull dataRow dataColumn ColumnName      string  null   Convert ToString dataRow dataColumn ColumnName   Replace     lt          amp lt      Replace     gt          amp gt      Replace                 amp quot      Replace                amp apos      Replace     amp          amp amp       if   string IsNullOrEmpty str   stringBuilder Append     lt TD gt      Append str  Append     lt  TD gt       else stringBuilder Append     lt TD gt      Append     lt  TD gt         num2    stringBuilder Append     lt  TR gt         num1    stringBuilder Append     lt  TABLE gt       return   object  stringBuilder  ToString       protected static bool IsPrimaryKey string ColumnName  DataColumn   PKs    if  PKs    null    string IsNullOrEmpty ColumnName   return false  foreach  DataColumn dataColumn in PKs    if  dataColumn ColumnName ToLower   Trim      ColumnName ToLower   Trim    return true    return false     public static DataTable XmlStringToDataTable string XmlData    DataTable dataTable    DataTable  null  IList lt DataColumn gt  list    IList lt DataColumn gt   new List lt DataColumn gt     if  string IsNullOrEmpty XmlData   return  DataTable  null  XmlDocument xmlDocument1   new XmlDocument    xmlDocument1 PreserveWhitespace   true  XmlDocument xmlDocument2   xmlDocument1  xmlDocument2 LoadXml XmlData   XmlNode xmlNode1   xmlDocument2 SelectSingleNode     TABLE      if  xmlNode1    null    dataTable   new DataTable    int num   0  foreach  XmlNode xmlNode2 in xmlNode1 SelectNodes    TR        if  num    0    foreach  XmlNode xmlNode3 in xmlNode2 SelectNodes    TH        bool result   false  string str   xmlNode3 Attributes    IsPK     Value  if   string IsNullOrEmpty str     if   bool TryParse str  out result   result   false    else result   false  Type type   Type GetType xmlNode3 Attributes    ColType     Value   DataColumn column   new DataColumn xmlNode3 InnerText  type   if  result  list Add column   if   dataTable Columns Contains column ColumnName   dataTable Columns Add column     if  list Count  gt  0    DataColumn   dataColumnArray   new DataColumn list Count   for  int index   0  index  lt  list Count    index  dataColumnArray index    list index   dataTable PrimaryKey   dataColumnArray      else   DataRow row   dataTable NewRow    int index   0  foreach  XmlNode xmlNode3 in xmlNode2 SelectNodes    TD        Type dataType   dataTable Columns index  DataType  string s   xmlNode3 InnerText  if   string IsNullOrEmpty s     try   s   s Replace     amp lt          lt       s   s Replace     amp gt          gt       s   s Replace     amp quot                   s   s Replace     amp apos                  s   s Replace     amp amp          amp       row index    Convert ChangeType  object  s  dataType     catch   if  dataType    typeof  DateTime   row index     object  DateTime ParseExact s     yyyyMMdd      IFormatProvider  CultureInfo InvariantCulture       else row index    Convert DBNull    index    dataTable Rows Add row       num      return dataTable

User · Answer

If your e using Web Forms then Grid View can work very nicely for this  The code looks a little like this   aspx page    lt asp GridView ID  GridView1  runat  server  DataKeyNames  Name Size Quantity Amount Duration  gt  lt  asp GridView gt    You can either input the data manually or use the source method in the code side  public class Room       public string Name     public double Size  get  set       public int Quantity  get  set       public double Amount  get  set       public int Duration  get  set      protected void Page Load object sender  EventArgs e        if  IsPostBack   this is so you can keep any data you want for the list               List lt Room gt  rooms new List lt Room gt               then use the rooms Add   to add the rooms you need          GridView1 DataSource rooms         GridView1 Databind             Personally I like MVC4 the client side code ends up much lighter than Web Forms  It is similar to the above example with using a class but you use a view and Controller instead   The View would look like this    model YourProject Model IEnumerable lt Room gt    lt table gt       lt th gt           lt td gt  Html LabelFor model   gt  model Name  lt  td gt           lt td gt  Html LabelFor model   gt  model Size  lt  td gt           lt td gt  Html LabelFor model   gt  model Quantity  lt  td gt           lt td gt  Html LabelFor model   gt  model Amount  lt  td gt           lt td gt  Html LabelFor model   gt  model Duration  lt  td gt      lt  th gt  foreach item in model         lt tr gt           lt td gt  model Name lt  td gt           lt td gt  model Size lt  td gt           lt td gt  model Quantity lt  td gt           lt td gt  model Amount lt  td gt           lt td gt  model Duration lt  td gt      lt  tr gt     lt  table gt    The controller might look something like this   public ActionResult Index         List lt Room gt  rooms new List lt Room gt           again add the items you need      return View rooms       Hope this helps

User · Answer

The first answer is correct  but if you have a large amount of data  in my project I had 8 000 rows   8 columns  is tragically slow     Having a string that becomes that large in c  is why that solution is forbiden  Instead using a large string I used a string array that I join at the end in order to return the string of the html table  Moreover  I used a linq expression   from o in row ItemArray select o ToString    ToArray    in order to join each DataRow of the table  instead of looping again  in order to save as much time as possible   This is my sample code   private string MakeHtmlTable DataTable data                string   table   new string data Rows Count                long counter   1              foreach  DataRow row in data Rows                                table counter-1      lt tr gt  lt td gt     String Join   lt  td gt  lt td gt     from o in row ItemArray select o ToString    ToArray        lt  td gt  lt  tr gt                     counter  1                             return   lt  br gt  lt table gt     String Join     table      lt  table gt

User · Answer

I have seen some solutions here worth noting  as Omer Eldan posted  but here follows  ASP C   using System Data  using System Web UI HtmlControls   public static Table DataTableToHTMLTable DataTable dt  bool includeHeaders        Table tbl   new Table        TableRow tr   null      TableCell cell   null       int rows   dt Rows Count      int cols   dt Columns Count       if  includeHeaders                TableHeaderRow htr   new TableHeaderRow            TableHeaderCell hcell   null          for  int i   0  i  lt  cols  i                          hcell   new TableHeaderCell                hcell Text   dt Columns i  ColumnName ToString                htr Cells Add hcell                     tbl Rows Add htr              for  int j   0  j  lt  rows  j                  tr   new TableRow            for  int k   0  k  lt  cols  k                          cell   new TableCell                cell Text   dt Rows j  k  ToString                tr Cells Add cell                     tbl Rows Add tr             return tbl      why this solution  Because you can easily just add this to a panel ie   panel Controls Add DataTableToHTMLTable dtExample true      Second question   why do you have one column datatables and not just array s  Are you sure that these DataTables are uniform  because if the data is jagged then it s no use  If You really have to join these DataTables  there is many examples of Linq operations  or just use  beware though of same name columns as this will conflict in both linq operations and this solution if not handled    public DataTable joinUniformTable DataTable dt1  DataTable dt2        int dt2ColsCount   dt2 Columns Count      int dt1lRowsCount   dt1 Rows Count       DataColumn column      for  int i   0  i  lt  dt2ColsCount  i                  column   new DataColumn            string colName   dt2 Columns i  ColumnName          System Type colType   dt2 Columns i  DataType          column ColumnName   colName          column DataType   colType          dt1 Columns Add column            for  int j   0  j  lt  dt1lRowsCount  j                          dt1 Rows j  colName    dt2 Rows j  colName                       return dt1      and your solution would look something like   panel Controls Add DataTableToHTMLTable joinUniformTable joinUniformTable LivDT BathDT  BedDT  true      interpret the rest  and have fun

User · Answer

public static string toHTML Table DataTable dt        if  dt Rows Count    0  return        enter code here      StringBuilder builder   new StringBuilder        builder Append   lt html gt         builder Append   lt head gt         builder Append   lt title gt         builder Append  Page-        builder Append Guid NewGuid         builder Append   lt  title gt         builder Append   lt  head gt         builder Append   lt body gt         builder Append   lt table border  1px  cellpadding  5  cellspacing  0          builder Append  style  border  solid 1px Silver  font-size  x-small   gt         builder Append   lt tr align  left  valign  top  gt         foreach  DataColumn c in dt Columns                builder Append   lt td align  left  valign  top  gt  lt b gt             builder Append c ColumnName           builder Append   lt  b gt  lt  td gt               builder Append   lt  tr gt         foreach  DataRow r in dt Rows                builder Append   lt tr align  left  valign  top  gt             foreach  DataColumn c in dt Columns                        builder Append   lt td align  left  valign  top  gt                 builder Append r c ColumnName                builder Append   lt  td gt                       builder Append   lt  tr gt               builder Append   lt  table gt         builder Append   lt  body gt         builder Append   lt  html gt          return builder ToString

User · Answer

Just in case anyone arrives here and was hoping for VB  I did  and I didn t enter c  as a search term   here s the basics of the first response    Public Shared Function ConvertDataTableToHTML dt As DataTable  As String     Dim html As String     lt table gt       html      lt tr gt       For i As Integer   0 To dt Columns Count - 1         html      lt td gt     System Web HttpUtility HtmlEncode dt Columns i  ColumnName      lt  td gt       Next     html      lt  tr gt       For i As Integer   0 To dt Rows Count - 1         html      lt tr gt           For j As Integer   0 To dt Columns Count - 1             html      lt td gt     System Web HttpUtility HtmlEncode dt Rows i  j  ToString        lt  td gt           Next         html      lt  tr gt       Next     html      lt  table gt       Return html End Function

User · Answer

use this function               public static string ConvertDataTableToHTML DataTable dt                string html     lt table gt              add header row         html      lt tr gt            for int i 0 i lt dt Columns Count i                html    lt td gt   dt Columns i  ColumnName   lt  td gt            html      lt  tr gt              add rows         for  int i   0  i  lt  dt Rows Count  i                          html      lt tr gt                for  int j   0  j lt  dt Columns Count  j                    html      lt td gt     dt Rows i  j  ToString       lt  td gt                html      lt  tr gt                      html      lt  table gt            return html

User · Answer

Since I didn t see this in any of the other answers  and since it s more efficient  in lines of code and in speed   here s a solution in VB NET using a stringbuilder and lambda functions with String Join instead of For loops for the columns  Dim sb As New StringBuilder sb Append  quot  lt table gt  quot   sb Append  quot  lt tr gt  quot   amp  String Join  quot  quot   dt Columns OfType Of DataColumn    Select Function x   quot  lt th gt  quot   amp  x ColumnName  amp   quot  lt  th gt  quot   ToArray     amp   quot  lt  tr gt  quot   For Each row As DataRow In dt Rows     sb Append  quot  lt tr gt  quot   amp  String Join  quot  quot   row ItemArray Select Function f   quot  lt td gt  quot   amp  f ToString    amp   quot  lt  td gt  quot     amp   quot  lt  tr gt  quot   Next sb Append  quot  lt  table gt  quot    You can add your own styles to this pretty easily

[c#] Datatable to html Table

Examples related to c#

Examples related to asp.net

Examples related to datatable