[SPRING] jQuery DataTables - DataTable을 다시 초기화 할 수 없습니다.
SPRINGjQuery DataTables - DataTable을 다시 초기화 할 수 없습니다.
내가 진술 문을 렌더링하는 jQuery DataTables을 사용하여 봄 4.x 응용 프로그램에서 문장 페이지를 만들고 있습니다.
잭슨 메시지 변환기를 통해 구문 분석 한 후 서버에서 다음 개체를 반환했습니다.
{
"data":[
{
"desc":"SUBWAY 00501197 BRONX NYUS",
"amount":"-",
"date":"5.72"
},
{
"desc":"MIDTOWN COMICS NEW YORK NYUS",
"amount":"-",
"date":"73.32"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"BIMG PRIMARY CARE NEW YORK NYUS",
"amount":"-",
"date":"25.00"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"Walgreens Speci 205 8THNEW YORK NYUS",
"amount":"-",
"date":"10.00"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"9.99"
},
{
"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",
"amount":"-",
"date":"35.93"
},
{
"desc":"SHUN FA RELAXING CENTE NEW YORK NYUS",
"amount":"-",
"date":"20.00"
},
{
"desc":"CHIPOTLE 0590 NEW YORK NYUS",
"amount":"-",
"date":"9.00"
},
{
"desc":"CHIPOTLE 0590 NEW YORK NYUS",
"amount":"-",
"date":"9.00"
},
{
"desc":"ALEX CLEANERS BRONX NYUS",
"amount":"-",
"date":"58.95"
},
{
"desc":"SUBWAY 00501197 BRONX NYUS",
"amount":"-",
"date":"5.17"
},
{
"desc":"PAYPAL *LAROMANAAPA 4029357733 CAUS",
"amount":"-",
"date":"103.20"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"4.99"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"4.99"
},
{
"desc":"LA ISLA RESTAURANT #2 NEW YORK NYUS",
"amount":"-",
"date":"12.75"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",
"amount":"-",
"date":"7.62"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"3.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
}
]
}
이제이 데이터 테이블에 다음과 같이 전달하려고합니다. 하지만 오류가 발생합니다.
$('#example').dataTable(data)
하지만 그것은 나에게 다음과 같은 오류를 준다.
또한 렌더링 된 테이블에는 열 이름 대신 데이터가있어 잘못 보입니다.
아래 내 컨트롤러입니다
@RequestMapping(value = "/getStmt", method = RequestMethod.GET)
public @ResponseBody HashMap<String,ArrayList<UserStatement>> getStatement(@RequestParam(required = true) String name, @RequestParam(required = true) String month, HttpServletRequest request, Model model){
System.out.println(name+", "+month+"");
User user = userDao.findUserByName(name);
ArrayList<UserStatement> s=new ArrayList<UserStatement>();
if (user != null && user.getUser_token()!=null) {
s = (ArrayList<UserStatement>) userDao.getUserSelectedStatement(user.getUser_token(), 07, 2015);
}else{
UserStatement us =new UserStatement();
us.setAmount("A user token could not be found for the user ");
s.add(us);
}
HashMap<String, ArrayList<UserStatement>> h=new HashMap<String, ArrayList<UserStatement>>();
h.put("data", s);
return h;
}
아래는 나의 Ajax 함수이다.
$(document).ready(function(){
var today = new Date();
var month=today.getMonth();
var name="test";
$.ajax({
type: "GET",
url: "getStmt.ajax",
data: "name="+name+"&month="+month,
success: function(msg){
$('#stdata').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
var data1 = JSON.stringify(msg);
console.log(data1);
console.log(data1.data);
console.log( "Data Saved: " + msg );
$('#example').dataTable( {
"aaData": data,
"aoColumns": [
{"sTitle": "Description"},
{"sTitle": "Amount" },
{"sTitle": "Date" }
]
} );
},
error: function(msg){
var data = msg;
console.log( "There was an error: " + msg );
$('#stdata').dataTable( {
"ajax": data,
"columns": [
{ "title": "Description" },
{ "title": "Amount" },
{ "title": "Date" },
{ "title": "Balance" }
]
} );
}
});
});
및 html :
<div class="panel-body">
<div id="stdata">
</div>
</div>
테이블은 stdata div 안에 있어야합니다.
어떻게 작동시킬 수 있습니까? 또한 사용자가 드롭 다운 목록에서 선택한 날짜를 변경하면 해당 날짜에 Ajax를 통해 테이블을 다시 채워야합니다.
해결법
-
==============================
1.ajax.data 옵션을 사용하여 서버에 전송할 추가 매개 변수를 추가하십시오.
ajax.data 옵션을 사용하여 서버에 전송할 추가 매개 변수를 추가하십시오.
이렇게하면 테이블을 다시 초기화 할 필요가 없어 코드가 훨씬 간단 해집니다.
예 :
$('#example').DataTable({ ajax: { url: "/script.php", data: function(d){ d.select1 = $('#example-select1').val(); d.select2 = $('#example-select2').val(); } } }); $('#example-select1, #example-select2').on('change', function(){ $('#example').DataTable().ajax.reload(); });여기서 example-select1, example-select2는 드롭 다운의 ID입니다.
코드와 데모는 jsFiddle을 참조하십시오.
rows.add ()와 함께 clear ()를 사용하여 테이블을 지우고 DataTables 1.10+에 대한 새 데이터를 추가하십시오. DataTables 1.9의 경우 fnClearTable 및 fnAddData를 각각 사용하십시오.
기존 테이블에 데이터를 추가하려면 (DataTables 1.10 이상) :
$('#example').DataTable().clear(); $('#example').DataTable().rows.add(msg.data);여기서 msg는 서버의 응답을 보유하는 변수입니다.
선택기와 일치하는 기존 테이블을 삭제하고 새 옵션으로 바꾸려면 bDestroy (DataTables 1.9) 또는 destroy (DataTables 1.10+) 옵션을 사용하십시오.
테이블을 다시 초기화하려면 (DataTables 1.10 이상) :
$('#example').DataTable( { "destroy": true, "data": msg.data, "columns": [ {"title": "Description"}, {"title": "Amount" }, {"title": "Date" } ] });여기서 msg는 서버의 응답을 보유하는 변수입니다.
from https://stackoverflow.com/questions/31948959/jquery-datatables-cannot-reinitialise-datatable by cc-by-sa and MIT license
'SPRING' 카테고리의 다른 글
| [SPRING] Spring : ManyToOne 엔티티를 가져올 때 참조 엔티티 (OneToMany)가 JSON에 표시되지 않습니다. (0) | 2019.05.18 |
|---|---|
| [SPRING] Spring / Hibernate에서의 적절한 캐시 사용법 (0) | 2019.05.18 |
| [SPRING] Spring Cloud Stream 및 @Publisher 주석 호환성 (0) | 2019.05.18 |
| [SPRING] OPTIONS / DELETE에 대해 봄 부팅 데이터 Rest + CORS가 올바르게 설정되지 않음 (0) | 2019.05.18 |
| [SPRING] Spring Boot @WebMvcTest를 사용하여 테스트 할 때 내 컨텍스트에서 다른 @Controller를 제외하는 방법 (0) | 2019.05.18 |