In this article, we will learn how to use JQuery Datatable in ASP.NET Core with Server Side Processing. We will also be building a simple real-world implementation to help understand JQuery Datatable to it’s fullest. You can find the source code of the entire implementation here. Let’s begin
Features:
Works standalone but ships with handy wrapper for jQuery.
This is a jQuery UI themes package for installing all the themes of jQuery UI. This package includes black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader.
var maleNames = people .Where(p => p.Sex == "M") .Select(p => p.Name)
var maleNames = $.grep(people, function (p) { return p.Sex == 'M'; })
.map(function (p) { return p.Name; }); {
"name": "testwebapp",
"version": "1.0.0",
"description": "",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^2.2.4",
"jquery-ajax-unobtrusive": "^3.2.4",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.8"
}
} [
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-validation/dist/jquery.validate.min.js",
"node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js",
"node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - DNTCommon.Web.Core.TestWebApp</title>
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html> <Project Sdk="Microsoft.NET.Sdk.Web">
<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
<Exec Command="dotnet bundle" />
</Target>
<ItemGroup>
<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" />
</ItemGroup>
</Project> jQuery.extend({
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || window, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}, 
jQuery('#refresh').on({
'click': function () {
var random = new Date();
jQuery.ajax({
url: '@Url.Action("CaptchaImage","Captcha")',
type: "GET",
data: null,
success: function (result) {
jQuery("#imgcpatcha").attr("src", "/Captcha/CaptchaImage?" + random + result);
}
});
}
}); jQuery.extend({
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || window, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},