Click here to Skip to main content
15,900,511 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to create Html Table in this format

	Sameer			Vishwajit		Sachin		
Source	ML	FO	Data	ML	FO	Data	ML	FO	Data
TCS	10	20	30	5	8	9	4	5	6
WIPRO	20	24	26	8	9	7	5	6	3
GODREJ	30	25	24	8	4	8	6	4	5


What I have tried:

I have Tried .....
HTML Page Code is
<table id="tbDetails" class="display; cell-border">
                    <thead></thead>
                    <tbody></tbody>
                </table>

                    
                    
                

Jquery Code is .....
$.ajax({
url: "testing.asmx/Customize_Datatable",
type: "POST",
dataType: "json",
crossDomain: true,
success: function (data) {
$('#tbDetails').dataTable({
data: data,
"bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
"paging": false,//Dont want paging
"bPaginate": false,//Dont want paging
"bFilter": false, //hide Search bar
"bSort": false,
"orderCellsTop": true,
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert('error: ' + textStatus + ': ' + errorThrown);
}
});

And Webservice Code is

[WebMethod]
    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
    public void Customize_Datatable()
    {
        try
        {
            String Query = "<table id = 'tbDetails' class='display' style='width:100%'> " +
          " <thead> " +
            " <tr> " +
                " <th> Name </th> " +
                " <th> Position </th> " +
                 "<th> Office </th> " +
                 "<th> Age </th> " +
                 "<th> Start date </th> " +
                  "  <th> Salary </th> " +
                " </tr> " +
            " </thead>" +
            "<tbody> " +
                "<tr> " +
                    "<td> Tiger Nixon </td> " +
                       "<td> System Architect </td> " +
                          "<td> Edinburgh </td> " +
                          "<td> 61 </td> " +
                          "<td> 2011 / 04 / 25 </td> " +
                          "<td>$320,800 </td> " +
                        "</tr> " +
            " </tbody> " +
                 "</table> ";
            // return Query;

            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(Query));
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
Posted
Updated 12-Dec-20 4:12am
v3

1 solution

A similar question, marked solution accepted: Display database value into HTML table using jquery ajax call method in ASP.NET[^]

It has sample HTML, jQuery call and the Service setup example. Try out.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900