Post
Ask Question

Bind Data to Datatable using JQuery or JSON

HTML File
  1.    
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head id="Head1" runat="server">  
  5.         <title>Asp.net Bind Data to Datatable using JQuery or JSON</title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8. $(document).ready(function () {  
  9. $.ajax({  
  10. type: "POST",  
  11. contentType: "application/json; charset=utf-8",  
  12. url: "tablebinding.aspx/BindDatatable",  
  13. data: "{}",  
  14. dataType: "json",  
  15. success: function (data) {  
  16. for (var i = 0; i < data.d.length; i++) {  
  17. $("#tbDetails").append("  
  18.             <tr>  
  19.                 <td>" + data.d[i].UserId + "</td>  
  20.                 <td>" + data.d[i].UserName + "</td>  
  21.                 <td>" + data.d[i].Location + "</td>  
  22.             </tr>");  
  23. alert(JSON.stringify(data));  
  24. }  
  25. },  
  26. error: function (result) {  
  27. alert("Error");  
  28. }  
  29. });  
  30. });  
  31.   
  32.         </script>  
  33.         <style type="text/css">  
  34. table,th,td  
  35. {  
  36. border:1px solid black;  
  37. border-collapse:collapse;  
  38. }  
  39. </style>  
  40.     </head>  
  41.     <body>  
  42.         <form id="form1" runat="server">  
  43.             <table id="tbDetails" cellpadding="0" cellspacing="0">  
  44.                 <thead style="background-color:#DC5807; color:White; font-weight:bold">  
  45.                     <tr style="border:solid 1px #000000">  
  46.                         <td>UserId</td>  
  47.                         <td>UserName</td>  
  48.                         <td>Location</td>  
  49.                         <td>Action</td>  
  50.                     </tr>  
  51.                 </thead>  
  52.                 <tbody></tbody>  
  53.             </table>  
  54.         </form>  
  55.     </body>  
  56. </html>  
ASP.NET File
  1. <WebMethod()> _  
  2. Public Shared Function BindDatatable() As UserDetails()  
  3. Dim dt As New DataTable()  
  4. Dim details As New List(Of UserDetails)()  
  5. Using con As New SqlConnection("DatabasePath")  
  6. Using cmd As New SqlCommand("select * from Table_Name", con)  
  7. con.Open()  
  8. Dim da As New SqlDataAdapter(cmd)  
  9. da.Fill(dt)  
  10. For Each dtrow As DataRow In dt.Rows  
  11.     Dim user As New UserDetails()  
  12.     user.UserId = dtrow("UserId").ToString()  
  13.     user.UserName = dtrow("UserName").ToString()  
  14.     user.Location = dtrow("Location").ToString()  
  15.     details.Add(user)  
  16. Next  
  17. End Using  
  18. End Using  
  19. Return details.ToArray()  
  20. End Function  
  21. Public Class UserDetails  
  22. Public Property UserId() As String  
  23. Get  
  24. Return m_UserId  
  25. End Get  
  26. Set(ByVal value As String)  
  27. m_UserId = Value  
  28. End Set  
  29. End Property  
  30. Private m_UserId As String  
  31. Public Property UserName() As String  
  32. Get  
  33. Return m_UserName  
  34. End Get  
  35. Set(ByVal value As String)  
  36. m_UserName = Value  
  37. End Set  
  38. End Property  
  39. Private m_UserName As String  
  40. Public Property Location() As String  
  41. Get  
  42. Return m_Location  
  43. End Get  
  44. Set(ByVal value As String)  
  45. m_Location = Value  
  46. End Set  
  47. End Property  
  48. Private m_Location As String  
  49. End Class