DataTable in Angular Way
11:41
Introduction
Hi friends, In this post I want to show you how to use Data table with AngularJS.
<link href="bootstrap.min.css" rel="stylesheet" /> Download
<link href="font-awesome.min.css" rel="stylesheet" /> Download
<link href="datatable.css" rel="stylesheet" /> Download
<script src="jquery.min.js"></script> Download
<script src="angular.min.js"></script> Download
<script src="bootstrap.min.js"></script> Download
<script src="datatable.js"></script> Download
<script src="app.js"></script>
HTML
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="font-awesome.min.css" rel="stylesheet" />
<link href="datatable.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="datatable.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="ngAppDemo">
<div class="container-fluid" style="margin-left:15%;margin-right:15%;">
<div class="row">
<h1 align=center>Data Table With Angular JS</h1><br>
<div ng-controller="ngAppDemoController">
<div class="col-md-12 col-lg-12" ultimate-datatable="datatable"></div>
</div>
</div>
</div>
</body>
</html>
app.js
angular.module('ngAppDemo', ['DataTableServices']).controller('ngAppDemoController', ['$scope', 'datatable', function ($scope, datatable) {
//Simple example of configuration
var datatableConfig = {
"name": "simple_datatable",
"columns": [
{
"header": "Name",
"property": "Name",
"order": true,
"type": "text", // "text"/"number"/"month"/"week"/"time"/"datetime"/"range"/"color"/"mail"/"tel"/"date"
"edit": true,
"position": 0,
//"convertValue": {
// "active": true, // True if the value have to be converted when displayed to the user
// "displayMeasureValue": "366", // The unit display to the user, mandatory if active=true
// "saveMeasureValue": "766" // The unit in database, mandatory if active=true
//},
"hide": false
//"choiceInList": true // When the column is in edit mode, the edition is a list of choices or not
//"listStyle": "select" // select / radio
//"possibleValues": ["choice1", "choice2", "choice3"],
//"format": "number" // "date" / "datetime"
//"defaultValue" : "SSSSSSSSSS"
//"url": "theUrlToGetTheData"
},
{
"header": "Salary",
"property": "Salary",
"order": true,
"type": "text",
"edit": true,
"position": 1
},
{
"header": "EmployeeID",
"property": "EmployeeID",
"order": true,
"type": "text",
"edit": true,
"position": 2
}
],
"colmunsUrl": "theUrl",
"add": {
"active": true,
"showButton": true
},
"save": {
"active": true,
"withoutEdit": true, // If you want to be able to safe without editing lines
"keepEdit": false, // Keep in edit mode after save
"showButton": true, // Show the save button in the toolbar
"changeClass": true, // Change class to success or error on the lines
"mode": 'local', // Save mode
"url": "theUrl", // or function(value){return "url"} Required if mode is remote
"batch": true, // for batch mode one url with all data
"method": 'post', // or function(line){ return 'method'} The HTTP verb
"value": function (value) { return value; }, // used to transform the value send to the server
"callback": function (datatable, errorsNumber) { } // used to have a callback after save all elements.
},
"edit": {
"active": true,
"columnMode": true,
},
"remove": {
"active": true,
"mode": 'local',
"withEdit": true, //Allow to remove a line in edition mode
"showButton": true, //Show the remove button in the toolbar
"url": "theUrl", // or function(value){return "url"},
"callback ": function (datatable, errorsNumber) { } //Callback after remove all element.
},
"pagination": {
"active": true, // Active or not
"mode": 'local', // 'remote' or 'local',//remote will call the server to do the pagination things
"numberPageListMax": 3,
"numberRecordsPerPage": 10, // Number of item in a page
"numberRecordsPerPageList": [{ number: 10, clazz: '' }, { number: 25, clazz: '' }] // The list of the possible option given to the user
},
"compact": true,
"mergeCells": {
"active": true // Active or not
},
"exportCSV": {
active: true, // Active or not
showButton: true, // Show the export button in the toolbar
delimiter: ";" // Set the delimiter
},
"showTotalNumberRecords": true,
"order": {
"mode": 'local', // 'remote' or 'local'
"active": true, // Active or not
"showButton": true, // Show the order button in the toolbar
"by": "Name", // order by Column name
"reverse": false, // reverse the order
"callback": function (datatable, errorsNumber) { }, // used to have a callback after order all element.
},
"show": {
"active": true,
"showButton": true,
"add": function (line) {
//open a new page or add new tab to show detail...
}
},
"hide": {
"active": true,
"showButton": true // Show the hide button in the toolbar
},
"select": {
"active": true,
"showButton": true, // Show the select all button in the toolbar
},
"filter": {
active: true,
highlight: true,
columnMode: false,
showButton: false //Show the filter and reset buttons if true
},
"otherButtons": {
"active": false, // Active or not
"template": "ABC" // Html element
},
"messages": {
"active": false, // Active or not
"errorClass": 'alert alert-danger', // Set the class when their is errors
"successClass": 'alert alert-success', // Set the class when their is success
"errorKey": { save: 'datatable.msg.error.save', remove: 'datatable.msg.error.remove' }, // Set the error key to be i18n
"successKey": { save: 'datatable.msg.success.save', remove: 'datatable.msg.success.remove' }, //Set the success key to be i18n
"text": "Hello", // Current text
"clazz": "", // current class
"transformKey": function (key, args) { } // the function that transform the key
},
"group": {
"active": true, // Active or not, group add group:boolean in each line of type group
"callback": function (datatable) { }, // Call after the group function
"by": "Name",// group by...
"showButton": true, // Show the group button in the toolbar
"after": true, // To position group line before or after lines
"showOnlyGroups": true, // To display only group line in datatable
"enableLineSelection": true // Authorized or not selection on group line
},
"extraHeaders": {
number: 0, // Number of extra headers
list: {}, // If dynamic:false
dynamic: false // If dynamic:true, the headers will be auto generated
}
};
//Simple exemple of data
var datatableData = [
{ "Name": "Surajit Ghosh", "Salary": 58000, "EmployeeID": 1008 },
{ "Name": "Amit Bhunia", "Salary": 25000, "EmployeeID": 1005 },
{ "Name": "Sourav Mondal", "Salary": 69333, "EmployeeID": 1006 },
{ "Name": "Sayan Bose", "Salary": 10222, "EmployeeID": 1007 },
{ "Name": "Nihar Shaw", "Salary": 89250, "EmployeeID": 1001 },
{ "Name": "Sankar Parida", "Salary": 89556, "EmployeeID": 1003 },
{ "Name": "Monaranjan Chatri", "Salary": 89556, "EmployeeID": 1002 },
{ "Name": "Shantanu Nag", "Salary": 89556, "EmployeeID": 1004 },
{ "Name": "Abhijit Bera", "Salary": 89556, "EmployeeID": 1009 },
{ "Name": "Pankaj Das", "Salary": 89556, "EmployeeID": 1010 },
{ "Name": "Minhaj Ali", "Salary": 89556, "EmployeeID": 1015 },
{ "Name": "Arko Pramanik", "Salary": 89556, "EmployeeID": 1014 },
{ "Name": "Rana Mondal", "Salary": 89556, "EmployeeID": 1013 },
{ "Name": "Asis Bera", "Salary": 89556, "EmployeeID": 1012 },
{ "Name": "Tarun Samai", "Salary": 89556, "EmployeeID": 1011 },
{ "Name": "Biswajit Das", "Salary": 65000, "EmployeeID": 1016 }];
//Init the datatable with his configuration
$scope.datatable = datatable(datatableConfig);
//Set the data to the datatable
$scope.datatable.setData(datatableData);
}]);
0 comments