-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdynanicTable.html
83 lines (78 loc) · 3.36 KB
/
dynanicTable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title>
Dynamic Table Goes Here
</title>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/dynamic-table.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body class="bg-danger">
<div class="container bg-light p-4" >
<table id="dynamicTable">
</table>
</div>
<script type="text/javascript" src="./js/jquery.dynamic-table.js"></script>
<script type="text/javascript">
columnInfo= {
columns:
[
{ name : 'name',
type: 'text',
label:'Name',
template: '<img src="::_links.avatar.href::" style="width: 60px; border-radius: 50%;"/> ::name::',
searchable: true
},
{
name: 'email',
type: 'text',
label: 'Email',
searchable: true
},
{
name: 'status',
type: 'select',
label: 'Status',
badgeClasses: {
'active':'badge-success',
'inactive': 'badge-danger'
},
template : '<a class="change-status" href="javascript:;" id="::id::"> <span class="badge ::(badgeClasses)::">::status::</span></a>',
tdClass: 'text-center',
options: [{'label': 'Active', 'value': 'active'},
{'label': 'Inactive', 'value': 'inactive'}
],
searchable: true,
},
{
name: 'website',
type: 'text',
label: 'Website',
template: '<a href="::website::" target="_blank">::website::</a>',
searchable: true,
}
],
primaryKey: 'id',
actionButtons :
[
{
template: '<a title = "Click to edit this record" href="::_links.self.href::"> <i class = "fa fa-eye"></i> View</a>'
},
]
};
$('#dynamicTable').dynamicTable({class: 'table-bordered table-striped',
url: 'https://gorest.co.in/public-api/users',
method : 'GET',
totalItemsKey: '_meta.totalCount',
dataItemsKey: 'result',
columnInfo: columnInfo,
params: {'_format': 'json',
'access-token': 'IHV_k_ry6RjB1Pns90WDZKKGVih42hXSeEp2'
}
});
</script>
</body>
</html>