Serimizin 3. yazısında Spring MVC, Ajax ,jQuery ve önyüzde Semantic UI ile Datatable'dan seçtiğimiz bir item ı sileceğiz. Burada ki senaryomuz şu şekilde olacaktır.
Kullanıcı Datatable ' dan istediği bir veriyi seçecek ardından sil butonuna basıp veriyi silecektir. Seçim yapmadığı takdirde 'Lütfen Seçim Yapınız' alert'i alacaktır.
Senaryomuzu oluşturduğumuza göre kodlamaya geçebiliriz.
springrestornekliste.jsp
<%@
page
language="java"
contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false"%>
<%@
taglib
uri="http://www.springframework.org/tags/form"
prefix="form"%>
<%@
taglib
uri="http://java.sun.com/jsp/jstl/core"
prefix="c"%>
<%@
taglib
uri="http://www.springframework.org/tags"
prefix="s"%>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link
rel="stylesheet"
href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<link
rel="stylesheet"
href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script
src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script
src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script
src="<c:url
value="/resources/js/springrestornekliste.js?v=1.3"
/>"></script>
</head>
<body>
<table
id="restdt"
class="ui
selectable celled table">
<thead>
<tr
id="filterrow">
<th>Ad</th>
<th>Soyad</th>
<th>E-Posta</th>
<th>Doğum
Tarihi</th>
</tr>
<tr>
<th
style="width:
100px;color:
blue;">Ad</th>
<th
style="width:100px;color:blue;">Soyad</th>
<th
style="color:blue;">E-Posta</th>
<th
style="width:
100px;color:
blue;">Doğum
Tarihi</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td>
<input
type="submit"
id="deleteSpringRestrecordId"
class="ui
red button"
value="Sil"
/>
</td>
</tr>
</tfoot>
</table>
<div
id="srolDelResponse"></div>
</body>
</html>
springrestornekliste.js
var
selectedUpdateId;
$(document).ready(function(){
var
picker
=
new
Pikaday(
{
field:
document.getElementById('dogumtarihi'),
firstDay:
1,
format
:
'DD.MM.YYYY',
minDate:
new
Date(1900,
0,
1),
maxDate:
new
Date(2016,
12,
31),
yearRange:
[1900,2016],
i18n:
{
previousMonth
:
'Önceki',
nextMonth
:
'Sonraki',
months
: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
weekdays
:
['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
weekdaysShort
:
['Paz','Pzt','Sal','Çar','Per','Cum','Cmt']
}
});
$('#restdt').dataTable(
{
"ajax":
{
"url":
"/SpringDispatcherServlet/springorneklistejson",
"dataSrc":
""
},
"bInfo"
:
false,
"columns":
[
{
"mData":
"ad"
},
{
"mData":
"soyad"
},
{
"mData":
"eposta"
},
{
"mData":
"dogumtarihi"
}
],
"oLanguage"
:
{
"sLengthMenu"
:
"_MENU_
",
"sSearch"
:
"<span
class='add-on'><i class='icon-search'></i></span>Ara:",
"sZeroRecords"
:
"Kayıt
Bulunamadı",
oPaginate:
{
"sFirst":
"İlk",
"sLast":
"Son",
"sNext":
"Sonraki",
"sPrevious":
"Önceki"
},
},
"iDisplayLength"
:
5,
"aLengthMenu"
:
[
[
5,
10
],
[
5,
10]
],
"aaSorting"
:
[
[
0,
'asc'
]
]
});
var
table
=
$('#restdt').DataTable();
$('#restdt
tbody').on(
'click',
function
()
{
if
(
$(this).hasClass('selected')
)
{
$(this).removeClass('selected');
}else
{
table.$('selected').removeClass('selected');
$(this).addClass('selected');
}
});
$('#restdt
thead tr#filterrow th').each(
function
()
{
var
title
=
$('#restdt
thead th').eq(
$(this).index()
).text();
$(this).html(
'<input
type="text" style="height:20px;" onclick="stopPropagation(event);" placeholder="'+title+'"
/>'
);
});
$("#restdt
thead input").on(
'keyup
change',
function
()
{
table
.column(
$(this).parent().index()+':visible'
)
.search(
this.value
)
.draw();
}
);
function
stopPropagation(evt)
{
if
(evt.stopPropagation
!==
undefined)
{
evt.stopPropagation();
}else
{
evt.cancelBubble
=
true;
}
}
$('#deleteSpringRestrecordId').click(
function
()
{
if(table.rows('.selected').data().length
==
0){
alert('Lütfen
Seçim Yapınız!');
}else{
deleteSpringRest(table.rows('.selected').data()[0].id);
}
});
function
deleteSpringRest(id){
$.ajax({
url:
"/SpringDispatcherServlet/springrestorneklistedelete/"+id,
type:
"DELETE",
dataType:
'json',
async:
true,
beforeSend:
function(xhr)
{
xhr.setRequestHeader("Accept",
"application/json");
xhr.setRequestHeader("Content-Type",
"application/json");
},
success:
function(smartphone)
{
var
respContent
=
"";
respContent
+=
"<a
class='ui green label'>Kayıt Silindi.</a>";
$('#restdt').DataTable().ajax.reload();
$("#srolDelResponse").html(respContent);
}
});
event.preventDefault();
}
SpringRestOrnekListeController.java
package
com.mesutemre.controller;
import
java.util.List;
import
org.springframework.beans.factory.annotation.Autowired;
import
org.springframework.http.HttpStatus;
import
org.springframework.http.MediaType;
import
org.springframework.http.ResponseEntity;
import
org.springframework.stereotype.Controller;
import
org.springframework.ui.Model;
import
org.springframework.validation.BindingResult;
import
org.springframework.web.bind.annotation.ModelAttribute;
import
org.springframework.web.bind.annotation.PathVariable;
import
org.springframework.web.bind.annotation.RequestMapping;
import
org.springframework.web.bind.annotation.RequestMethod;
import
org.springframework.web.bind.annotation.ResponseBody;
import
com.mesutemre.dao.SpringRestOrnekDAO;
import
com.mesutemre.model.SpringRestOrnek;
/**
*
@author
mesudemre
*
*/
@Controller
public
class
SpringRestOrnekListeController {
@Autowired
private
SpringRestOrnekDAO service;
@RequestMapping(value
= "/springrestornekliste"
, method = RequestMethod.GET)
public
String showSpringRestOrnekListe(Model model){
return
"springrestornekliste";
}
@RequestMapping(method
= RequestMethod.GET
, produces = "application/json"
,
value = "/springorneklistejson")
public
@ResponseBody
List<SpringRestOrnek> getSpringRestOrneks(){
return
service.getSpringRestOrnekListe();
}
@RequestMapping(value
= "/springrestorneklistedelete/{id}"
, method=RequestMethod.DELETE,
produces
= MediaType.APPLICATION_JSON_VALUE,
consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public
SpringRestOrnek deleteSpringRestOrnek(@PathVariable
int
id){
return
service.deleteSpringRestOrnek(id);
}
Uygulamamıza ait ekran görüntüleri aşağıda ki gibidir.
Hiç yorum yok:
Yorum Gönder