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
Ajax (remote data) Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API: In your HTML: In your Javascript: $('.js-data-example-ajax').select2({ ajax: { url: 'https://api.g
select2.org
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>
'dev > web' 카테고리의 다른 글
[html] 개행태그 pre 사용하기 / 엔터 없는 긴 텍스트 자동줄바꿈하기 (0) | 2023.03.10 |
---|