[자바스크립트 js] dataTable data to string / 말줄임(...) 방법

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 '말줄임'하는 법에 대해 공유하려 합니다.

말줄임은 보통 한정된 공간에서 텍스트 내용이 너무 길어지면 사용하는데요.

 

예를 들어,

국민 포털 네이버에서 뉴스탭에 들어가보면 이런 모습을 볼 수 있죠.

빨간색 동그라미로 표시한 부분을 봐주세요. 표시된 부분이 '말줄임'을 사용한 거랍니다.

 

 

 

자, 그럼 말줄임 적용하는 코드를 보여드릴게요.

api에서 data를 가져왔다고 가정한 코드입니다.

그리고 더 나아가, dataTable에서 data를 렌더링할 때 해당 코드를 보고 따라하시면 되는데요.

 

순서대로 설명을 해드릴게요.

limit 라는 변수 안에 40을 할당합니다. 글자로 치면 40자가 되겠죠?

 

이번엔 if문을 보겠습니다.

93번 행을 보시면, api에서 가져오는 data가 null 이면 ''(빈 값)을 리턴합니다.

95번 행에서는 data를 toString()을 통해 문자열로 변환한 후, 변환된 내용의 글자수를 계산합니다. (length)

96번 행에서는 그리고 그 계산된 글자수가 limit 즉, 40자보다 많으면 해당 데이터 내용을 substr()을 통해 글자를 자르게 되는데요.

그 다음, 글자 인덱스 0번부터 38번까지 자르고 그 이후에 ...을 붙인다는 내용입니다.

 

 

 

🖐🏻 잠깐만, subStr()이 궁금하신가요?

[제이쿼리 jQuery] 글자수 제한 / 글자수 체크 / textarea 사이즈 조절 방지