에이작스를 사용해 데이터 테이블을 만들고 검색기능을 사용할때
검색버튼을 클릭시
function search() {
$('.dt_game_with_btn_table.table').DataTable().ajax.reload(null, true);
}
에이작스를 리로드하여
data: function (d) {
let data = {
"page": parseInt(d.start / d.length),
"size": d.length,
"sort": columnsDefine[d.order[0].column].column,
"direction": d.order[0].dir.toUpperCase(),
"keyword": d.search.value,
"gameMode": $("#gameMode").val(),
"gameMethod": $("#gameMethod").val(),
"start": makeStartDate($("#endAt").val()),
"end": makeEndDate($("#endAt").val()),
"homeAlleyName": $("#homeAlleyName").val(),
"awayAlleyName": $("#awayAlleyName").val(),
"status": $("#status").val(),
"gameMemberNumber":$("#gameMemberNumber").val()
};
검색데이터를 서버로 보내준다 .
여기서 리로드에 옵션이있는데
function search() {
$('.dt_game_with_btn_table.table').DataTable().ajax.reload(null, true);
}
reload(callback, resetpage); 을줄수가 있는데
앞에 callback은 잘모르겠다 null값이 디폴트이니 주고 뒤에 resetpage의경우 default가 true이고 검색시 무조건 1페이지로 이동한다.
false로 되어있을경우 어떻게 되는지 살펴보자
12번페이지까지있는 데이터가있다고 할때 12번페이지에서 검색옵션을 3번페이지까지 있는 필터를 설정하고 검색하면 여전히 12번페이지에 머물르고 있어 데이터가 없다고 오류가 발생한다.
그러나 truer값을 주면 검색시 무조건 1페이지로 이동하여 문제 해결~!
참고:
https://datatables.net/reference/api/ajax.reload()