zeroOne

데이터 테이블 컬럼을 2줄로 고정되게 바꾸고 싶었는데
정말 많이 찾아봤지만 css 수정하는 방식밖에 없었다.

그런데 정말 황당하게도 너무 쉬운방법이 있었다...

그냥 culumnsDefine에

{
  targets: 2,
  className: 'aa',
  width: 200,
  responsivePriority: 1,
  render : function (data, type, full, meta) {
    return full['aa'] + ' ' + full['bb'] + '<br/>' + full['cc'] + ' ' + full['dd'];
  }
},

br 태그 넣어주면 됐다...

내시간

datatable 몇일째 수정중인데...

이게 찾아도 자료가 잘 안나온다...

몇일동안 구글링해본결과 

https://datatables.net/extensions/buttons/examples

여기 공식도큐먼트인듯한데 여기서 

example 찾아서 해야 할듯 하다.

그런데 코드가 하다말아놔가지고 찾기가 증말 힘들다..

간단하게 

원하는 컬럼만 export하는부분은

{
  extend: 'excel',
  text: feather.icons['file'].toSvg({class: 'font-small-4 mr-50'}) + 'Excel',
  className: 'dropdown-item',
  exportOptions: {
    columns: ':not(.actions, .control, .homeData, .awayData)',
  }
},

이렇게 exportOptions에 not 을 넣어주면 된다 .

not안에는 

{
  targets: 2,
  className: 'homeData',
  render : function (data, type, full, meta) {
    return full['homeAlleyName'] + ' / ' + full['homelaneCount'];
  }
},

컬럼에 지정해준 className 을 넣어주면 된다.

끝

기획이 나오기전 화면 작업을 하는데 ajax 통신을 이용하기 때문에

db없이 화면 을 구성하려면 임시 테이블이 필요했다.

우여곡절 끝에 찾은 방법이다.

생각보다 간단!

if (dataTable.length) {
  var dt_basic = dataTable.DataTable({
    "searching": false,
    ajax: './static/app-assets/data/pingong_test_data.json',
    columns: [
      {data: 'responsive_id'},
      {data: 'id'},
      {data: 'nickName'},
      {data: 'number'},
      {data: 'period'},
      {data: 'status'},
      {data: ''}
    ],

{
  "data": [
    {
      "responsive_id": "",
      "id": 1,
      "nickName": "제로원",
      "number": "1차",
      "period": "2022.04.01 ~ 2022.05.01",
      "status": 1
    },
    {
      "responsive_id": "",
      "id": 2,
      "nickName": "제로투",
      "number": "1차",
      "period": "2022.04.01 ~ 2022.05.01",
      "status": 1
    }
  ]
}

ajax 경로에 json 파일 이렇게 만들어 주면 된다.

js사용중 의문점이 생겼다.

return 문을 사용하면 어느 범위까지 탈출을 하는것일까

참고한 자료에따르면

1. break

 -switch문 / 반복문에서 중괄호를 빠져나오게 함.

2. return

 -함수에서 빠져나오게 함.

 -그 아래 코드는 실행하지 않음.

3.exit

 -main함수가 아닌 곳에서도 프로그램을 종료시킴 

 -main함수에서 return 0한 것과 동일

 -exit(0) 정상적인 종료

  exit(1) 비정상적인 종료 (에러가 발생함을 보여줌)

이렇게 된다면 return; 만 했을때는 메서드 하나에서만 나가야 되는데 예제를 보면

위 코드를 실행했을때 '함수안' 만 실행되고 if문밖의 모든 함수가 실행되지 않는다.

이 문제는 더 알아봐야할듯 하다...

에이작스를 사용해 데이터 테이블을 만들고 검색기능을 사용할때 

검색버튼을 클릭시 

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()

에이작스를 이용해서 데이터테이블을 만들고 그안에 데이터를 뿌려주는데 

아래와 같이 테이블이 이쁘지가 않게 나왔습니다.

데이터가 가운데 정렬도 되어있지않고 시간도 너무 이쁘지가 않네요.

먼저 가운데 정렬을 하는법은 

$('.dt_game_with_btn_table.table').css("text-align", "center");

이렇게 css속성을 center 로 보내주시면 됩니다.

그러면 이렇게 테이블이 깔끔하게 가운데 정렬이 됩니다!

그리고 필요한 컬럼은 width 를 정의해주셔서 2라인으로 만들어주시거나 넓이를 조절해 주시면 됩니다 .

유효성검사는 view단에서 할수있고 controller단에서 할수 있다.

이번에 정리할 것은 그중에서 view단에서 jquery.validate.min.js를 이용하여 유효성검사하는 방법이다.

먼저 라이브러리를 추가해준다.

<script th:src="@{/static/app-assets/vendors/js/forms/validation/jquery.validate.min.js}"></script>

다음 html에서 유효성검사를 할 구역을 설정해준다.

<form>
	<div class="form-validate">
    	<input type="text" class="form-control" id="subject" name="subject" required/>
	</div>
</form>

그리고 js파일에서 validate을 설정해준다.

$('.form-validate').validate({
	rules: {
    	name: required : true
    },
    messages : {
    	subject: "필수 입력 값입니다."
    },
    submitHandler:function () {
    	save();
    }
  })

이렇게 유효성검사가 가능하다