[Select2] Select2 선택박스 안에 무한스크롤 구현하기

 

HTML + Select2 + JQuery + C# + IBatis

 

 

Select2에서 지원하는 Pagination 기능을 통해

선택박스 안에 infinite scroll 무한스크롤을 구현할 수 있다.

 

 

공식문서 참고

https://select2.org/data-sources/ajax

Ajax (remote data) | Select2 - The jQuery replacement for select boxes

pagination 사용 방법

 

 

 

 

 

 

 

 

HTML로 빈 셀렉트 박스를 만들어준다.

<label for="test-select">Test Selectbox</label>
<select id="test-select" name="test-select" multiple="multiple"></select>

 

 

 

 

 

jQuery로 Select2 코드를 작성한다.

Pagination을 사용하기 위해서 Ajax 호출을 select2 메서드 안에서 해준다.

 

data 파라미터로 페이지와 검색어를 조절하고,

processResults에서 결과를 받는다.

var pageSize = 30;

$('#test-select').select2({
    placeholder: "* Any text", // default 문구
    closeOnSelect: false, // 선택 시마다 선택박스 닫히지 않게 함

    ajax: {
        type: "POST",
        url: '/Search/GetData',
        dataType: 'json',
        data: function (params) {
            if (params.page == null) params.page = 1;

            return {
                page: params.page, // 현재까지 로드한 페이지 수
                pageSize: pageSize, // 한 번 로드할 때 보여줄 데이터 수
                term: params.term // 검색어 입력 시 백엔드로 전달
            };
        },

        processResults: function (data, params) {
            if (!data.success) return console.error("API ERROR");
            if (params.page == null) params.page = 1;

            var options = data.result.map(function (elem) {
                return {
                    id: TEST_ID, // DB에서 가져온 데이터 중 id로 사용할 것
                    text: TEST_TEXT // DB에서 가져온 데이터 중 selectbox에 보여줄 것
                }
            });
            
            return {
                results: options,
                pagination: {
                    more: params.page * pageSize < data.total
                    // 로드할 데이터가 남아 있을 경우 more: true가 됨
                }
            }
        }
    }, //ajax
}); //select2

 

 

 

 

 

Controller 코드를 작성한다.

public JsonResult GetData(int page, int pageSize, string term)
{
    try
    {
    	// 쿼리문에 넣어줄 값들
        var parameters = new
        {
            startRow = (page - 1) * pageSize + 1,
            endRow = page * pageSize,
            searchTerm = term
        };

        ISqlMapper sqlMapper = Mapper.Instance();
        
        // 데이터 가져올 쿼리
        IList<TestModel> result = sqlMapper.QueryForList<TestModel>("GetData", parameters);
        // 총 데이터 수 가져올 쿼리
        int total = (int)sqlMapper.QueryForObject("GetDataTotal", null);

        // select2가 기대하는 Json 형식으로 변환 후 리턴
        return Json(new
        {
            success = true,
            result = result,
            total = total
        }, JsonRequestBehavior.AllowGet);

    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
}

 

 

 

 

 

쿼리문 두 가지를 작성한다.

 

- 데이터 가져올 쿼리문

검색어가 있을 경우를 위해 WHERE절을 넣어준다.

검색어의 대소문자 구분을 없애기 위해 LOWER()를 추가해주었다.

<select id="GetData" resultClass="TestModel">
  SELECT TEST_TEXT, TEST_ID
  FROM (
    SELECT TEST_TEXT, TEST_ID, ROWNUM AS rnum
    FROM TEST_TABLE
    WHERE LOWER(TEST_TEXT) LIKE '%' || LOWER(#searchTerm#) || '%'
    ORDER BY TEST_ID
  )
  WHERE rnum BETWEEN #startRow# AND #endRow#
</select>

 

- 데이터 총 개수 가져올 쿼리문

<select id="GetDataTotal" resultClass="int">
  SELECT COUNT(TEST_ID) FROM TEST_TABLE
</select>