ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Apply jQuery DataTable Plugin in HTML Table using AngularJS and WebService in ASP.Net<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-3.1.1.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope, $http) { $http.post(&#34;WebService.asmx/GetCustomers&#34;, { &#39;Content-Type&#39;: &#39;application/json&#39; }) .then(function (response) { $scope.Customers = response.data.d; angular.element(document).ready(function () { dTable = $(&#39;#tblCustomers&#39;) dTable.DataTable(); }); }, function error(response) { }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table id=&#34;tblCustomers&#34; class=&#34;table table-bordered bordered table-striped table-condensed datatable&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;info&#34;&gt; &lt;th&gt;Customer Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&#34;customer in Customers&#34;&gt; &lt;td&gt;{{customer.CustomerId}}&lt;/td&gt; &lt;td&gt;{{customer.Name}}&lt;/td&gt; &lt;td&gt;{{customer.City}}&lt;/td&gt; &lt;td&gt;{{customer.Country}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Webservice</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod()] public List&lt;Customer&gt; GetCustomers() { List&lt;Customer&gt; customers = new List&lt;Customer&gt;(); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; con.Open(); cmd.CommandText = &#34;SELECT CustomerId,ContactName,City,Country FROM Customers ORDER BY ContactName ASC&#34;; SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Customer customer = new Customer() { CustomerId = rdr[&#34;CustomerId&#34;].ToString(), Name = rdr[&#34;ContactName&#34;].ToString(), City = rdr[&#34;City&#34;].ToString(), Country = rdr[&#34;Country&#34;].ToString() }; customers.Add(customer); } con.Close(); } } return customers; } public class Customer { public string CustomerId { get; set; } public string Name { get; set; } public string City { get; set; } public string Country { get; set; } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Web Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; _ Public Function GetCustomers() As List(Of Customer) Dim customers As List(Of Customer) = New List(Of Customer)() Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Using cmd As SqlCommand = New SqlCommand() cmd.Connection = con con.Open() cmd.CommandText = &#34;SELECT CustomerId,ContactName,City,Country FROM Customers ORDER BY ContactName ASC&#34; Dim rdr As SqlDataReader = cmd.ExecuteReader() While rdr.Read() Dim customer As Customer = New Customer With { .CustomerId = rdr(&#34;CustomerId&#34;).ToString(), .Name = rdr(&#34;ContactName&#34;).ToString(), .City = rdr(&#34;City&#34;).ToString(), .Country = rdr(&#34;Country&#34;).ToString() } customers.Add(customer) End While con.Close() End Using End Using Return customers End Function Public Class Customer Public Property CustomerId As String Public Property Name As String Public Property City As String Public Property Country As String End Class End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/KRNsyEW.gif" alt="" width="411" height="404" /></span></strong></p>https://www.aspforums.net:443/Threads/172095/Apply-jQuery-DataTable-Plugin-in-HTML-Table-using-AngularJS-and-WebService-in-ASPNet/https://www.aspforums.net:443/Threads/172095/Apply-jQuery-DataTable-Plugin-in-HTML-Table-using-AngularJS-and-WebService-in-ASPNet/Tue, 16 Jul 2019 03:54:57 GMT