Skip to content

Commit a329a10

Browse files
gerardpuiglgerardpuigl
committed
JS Update DataTables Correction
1 parent 09e4dba commit a329a10

File tree

2 files changed

+29
-26
lines changed

2 files changed

+29
-26
lines changed

‎src/main/resources/static/index.js

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $(document).ready(function () {
33
});
44

55
var table = $('#employeeTable').DataTable({
6+
rowId:0,
67
columnDefs: [
78
{ targets: '_all', className: 'text-center' }]
89
});
@@ -17,7 +18,7 @@ function updateTable() {
1718
});
1819
}
1920

20-
//create Row for DataTables Format
21+
//Create Row for DataTables Format
2122
function createRow(employee) {
2223
return [
2324
employee.id,
@@ -66,7 +67,8 @@ function sendEmployee() {
6667
"job": $('#job').val()
6768
}),
6869
success: function (data, textStatus, jQxhr) {
69-
table.row(data.id).data(createRow(data)).draw(false);
70+
var rowSelector = "#" + data.id;
71+
table.row(rowSelector).data(createRow(data)).draw(false);
7072
$('#modal').modal('hide');
7173
},
7274
error: function (xhr, textStatus, errorThrown) {
@@ -101,13 +103,8 @@ function deleteEmployee(id) {
101103
type: "DELETE",
102104
url: "/EmployeeList/" + id,
103105
success: function (data, textStatus, jQxhr) {
104-
var indexes = table
105-
.rows()
106-
.indexes()
107-
.filter(function (value, index) {
108-
return id === table.row(value).data()[0];
109-
});
110-
table.rows(indexes).remove().draw(false);
106+
var rowSelector = "#" + id;
107+
table.row(rowSelector).remove().draw(false);
111108
},
112109
error: function (xhr, textStatus, errorThrown) {
113110
console.log(textStatus);

‎src/main/resources/templates/index.html

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,22 @@
1818
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
1919

2020
<!-- Boostrap custom colors -->
21-
<link rel="stylesheet" type="text/css" href="custom_bootstrap.min.css">
21+
<link rel="stylesheet" type="text/css" href="custom_bootstrap.min.css">
2222

2323
<!--BootBox PopUp Eliminar Empleat-->
2424
<script src=https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js></script>
2525

2626
<!--Custom Css-->
27-
<link rel="stylesheet" type="text/css" href="index.css">
27+
<link rel="stylesheet" type="text/css" href="index.css">
2828

2929
<!-- Data table -->
30-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/>
31-
30+
<link rel="stylesheet" type="text/css"
31+
href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" />
32+
3233
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
3334
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
3435

35-
</link>
36+
</link>
3637
</head>
3738

3839
<body>
@@ -45,7 +46,8 @@ <H4 class="headertitle">CRUD Empleats</H4>
4546
<h6>Exercici realitzat utilitzant: Spring Api Rest, Javascript, jquery i Bootstrap.</h6>
4647
</div>
4748
<div class="col-sm-4 my-auto text-right">
48-
<button type="button" class="btn btn-primary add" data-toggle="modal" data-target="#modal" onclick="newEmployee();">
49+
<button type="button" class="btn btn-primary add" data-toggle="modal" data-target="#modal"
50+
onclick="newEmployee();">
4951
<i class="bi bi-person-plus-fill icon" style="margin-right: 5px;"></i>
5052
Nou Empleat</button>
5153
</div>
@@ -54,20 +56,21 @@ <h6>Exercici realitzat utilitzant: Spring Api Rest, Javascript, jquery i Bootstr
5456
<table id="employeeTable" class="table table-hover table-striped">
5557
<thead>
5658
<tr>
57-
<th style="width:4%" >#</th>
59+
<th style="width:4%" id="id">#</th>
5860
<th style="width:28%">Nom</th>
5961
<th style="width:28%">Càrreg</th>
6062
<th style="width:28%">Salari</th>
6163
<th style="width:12%">Accions</th>
6264
</tr>
6365
</thead>
64-
<tbody>
66+
<tbody>
6567
<td>id</td>
6668
<td>nom</td>
6769
<td>carreg</td>
6870
<td>sou</td>
69-
<td><button type="button" class="btn btn-primary add" data-toggle="modal" data-target="#modal" onclick="newEmployee();">
70-
Nou Empleat</button></td>
71+
<td><button type="button" class="btn btn-primary add" data-toggle="modal"
72+
data-target="#modal" onclick="newEmployee();">
73+
Nou Empleat</button></td>
7174

7275
</tbody>
7376
</table>
@@ -96,11 +99,12 @@ <h5 class="modal-title" id="modaltitle"><span id=formType>Afegir nou</span> empl
9699
<div class="input-group-prepend w-25">
97100
<span class="input-group-text w-100">Nom</span>
98101
</div>
99-
<input class="form-control" type="text" id="name" placeholder="Indrodueix el nom de l'empleat.">
102+
<input class="form-control" type="text" id="name"
103+
placeholder="Indrodueix el nom de l'empleat.">
100104
</div>
101105
<div class="input-group mb-3">
102106
<div class="input-group-prepend w-25">
103-
<span class="input-group-text w-100" >Càrreg</span>
107+
<span class="input-group-text w-100">Càrreg</span>
104108
</div>
105109
<select class="form-control" id="job">
106110
<option value="Default">Escull un càrreg</option>
@@ -111,13 +115,15 @@ <h5 class="modal-title" id="modaltitle"><span id=formType>Afegir nou</span> empl
111115
<option value="Administratiu">Administratiu</option>
112116
</select>
113117
</div>
118+
119+
<div class="modal-footer">
120+
<button type="reset" class="btn btn-secondary cancel"
121+
data-dismiss="modal">Cancel·lar</button>
122+
<input type="button" class="btn btn-primary save" value="Afegir" id="action"
123+
onclick="sendEmployee();">
124+
</div>
114125
</form>
115126
</div>
116-
<div class="modal-footer">
117-
<button type="reset" class="btn btn-secondary cancel" data-dismiss="modal">Cancel·lar</button>
118-
<input type="submit" class="btn btn-primary save" value="Afegir" id="action"
119-
onclick="sendEmployee();">
120-
</div>
121127
</div>
122128
</div>
123129
</div>

0 commit comments

Comments
 (0)