March 30, 2016 00:05 by
PeterToday I want to show you how to Datatable Binding Using AngularJS. Now write the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Datatable Records Using AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script type="text/javascript">
debugger;
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http)
{
$scope.gridOptions = {
data: 'BindDataTableusingJSON',
columnDefs: [
{
field: 'Application_Number'
},
{
field: 'Candidate_Name'
},
{
field: 'Category'
},
{
field: 'Fathers_Name'
},
{
field: 'Date'
},
{
field: 'Address'
}]
};
$scope.BindDataTableusingJSON = {
"data": []
};
$http.post('try2.aspx/SaveUser',
{
data:
{}
})
// $http.get('try2.aspx/SaveUser')
.success(function (data)
{
debugger;
// var data = jQuery.parseJSON(data.d.toString());
var d = JSON.parse(data.d);
$scope.BindDataTableusingJSON = d;
});
}).config(function ($httpProvider)
{
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8";
});
</script>
<style type="text/css">
.grid {
width: 800px;
height: 400px;
}
.nodatatxt {
position: absolute;
top: 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br />
<br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="BindDataTableusingJSON.data.length==0"> No Records Found</div>
</div>
</div>
</form>
</body>
</html>
Code-behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.Script.Services;
public partial class Services_t_try2: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}
[WebMethod]
[ScriptMethod]
public static string SaveUser()
{
DataSet ds = YourFunctionWhichReturnsDataset();
DataTable dt = ds.Tables[0];
ds.Tables[0].Columns[4].ColumnName = ds.Tables[0].Columns[4].ColumnName.Replace("Date Of Birth", "Date");
return DataTableToJSONWithJavaScriptSerializer(ds.Tables[0]);
}
public static string DataTableToJSONWithJavaScriptSerializer(DataTable table)
{
JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
List < Dictionary < string, object >> parentRow = new List < Dictionary < string, object >> ();
Dictionary < string, object > childRow;
foreach(DataRow row in table.Rows)
{
childRow = new Dictionary < string, object > ();
foreach(DataColumn col in table.Columns)
{
childRow.Add(col.ColumnName, row[col]);
}
parentRow.Add(childRow);
}
return jsSerializer.Serialize(parentRow);
}
}
HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.
