Angular Data Table
17:08
Introduction
In this post I want to show, how to create angular data table.Data Table View
Using Js and Css
<link href="/css/jquery.dataTables.css" rel="stylesheet" /> Download
<script src="/js/jquery.js"></script> Download
<script src="/js/jquery.dataTables.js"></script> Download
<script src="/js/angular.js"></script> Download
<script src="/js/angular-datatables.js"></script> Download
<script src="/js/angular-resource.js"></script> Download
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularDatatable.Controllers
{
public class DatatableController : Controller
{
public ActionResult Test()
{
return View();
}
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="/css/jquery.dataTables.css" rel="stylesheet" />
<script src="/js/jquery.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/angular-datatables.js"></script>
<script src="/js/angular-resource.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div style="margin-left: 25%; margin-right: 25%; margin-top: 5%;">
<h1>Simple Angular Datatable</h1>
<div ng-controller="ctrlDatatable as dTable" style="border: 1px solid black; padding: 15px 2px 15px 2px;">
<table datatable="" dt-options="dTable.dtOptions" dt-columns="dTable.dtColumns"></table>
</div>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', ['datatables', 'ngResource']);
app.controller('ctrlDatatable', function ($scope, $rootScope, $resource, $q, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('/data.json')
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];
});
data.json
Click here to download data.jsonError
Wow! When we run the application it throws an error !!!
Solution
To resolve this error add a code in web.config <system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
0 comments