WebForm1.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JavascriptDateTimeConversion.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery DataTable</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "WebForm1.aspx/ContactList",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$("[id*=contact]").DataTable(
{
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response.d,
columns: [{ 'data': 'ContactID'},
{ 'data': 'FullName' },
{ 'data': 'EmailID' },
{
'data': 'DOB', "render": function (data) {
return getDateString(data);
}
}]
});
};
function getDateString(date) {
var dateObj = new Date(parseInt(date.substr(6)));
var options = { year: "numeric", month: "numeric", day: "numeric" };
return dateObj.toLocaleDateString("en-GB");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-top:100px;">
<table id="contact" class="table table-striped table-bordered" >
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr style="border:solid 1px #000000">
<td>ContactID</td>
<td>FullName</td>
<td>EmailID</td>
<td>DOB</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
WebForm1.aspx.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace JavascriptDateTimeConversion
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod(EnableSession = true)]
public static List<tblContact> ContactList()
{
List<tblContact> tbl = new List<tblContact>();
dbContactsEntities db = new dbContactsEntities();
var fld = db.tblContacts.ToList();
return fld;
}
}
}
