[javascript] DataTables에서 특정 열의 데이터를 유효성 검사하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTable에서 특정 열의 데이터를 유효성 검사하기 위해 Custom Validator를 사용할 수 있습니다. 다음은 이를 수행하는 간단한 예제입니다.

$(document).ready(function() {
  $('#dataTable').DataTable({
    columns: [
      { data: 'name' },
      { data: 'age', render: function(data, type, row) {
          return '<input type="text" class="age-input" value="' + data + '" />';
        }
      },
      { data: 'email' },
      // 다른 열들...
    ],
    initComplete: function() {
      $('#dataTable').on('change', '.age-input', function() {
        var value = $(this).val();
        // 여기에서 유효성 검사 로직을 수행합니다.
        // 예를 들어, 숫자인지 확인하고 범위에 맞는지 검사할 수 있습니다.
        if (isNaN(value) || value < 0 || value > 100) {
          $(this).addClass('invalid');
        } else {
          $(this).removeClass('invalid');
        }
      });
    }
  });
});

위 코드에서는 DataTables의 columns 옵션을 사용하여 각 열을 정의하고, 나이(age) 열은 input 요소로 렌더링합니다. 데이터가 변경될 때마다 change 이벤트를 감지하여 유효성 검사를 수행하고, 유효하지 않은 데이터인 경우에는 해당 input 요소에 ‘invalid’ 클래스를 추가하고 유효한 데이터인 경우에는 ‘invalid’ 클래스를 제거합니다.

유효성 검사 로직은 여러분의 요구에 따라 다양하게 수정할 수 있습니다. 숫자 유효성 검사 외에도 이메일 형식 검사, 길이 제한 검사 등 다양한 검사를 추가할 수 있습니다.

참고 자료: