Spring framework Page<T> 와 DataTables.js 연동

Spring framework Page<T> 와 DataTables.js 연동

 

Spring framework Controller 에서 사용할 SearchContext 생성

@Data
@Accessors(chain=true)
public class SearchContext {
   private String search;
   private String keyword;
   private String order;
   private Direction direction = Direction.ASC;
   private int size = 20;
   private int page = 1;
   
   public String getSearchParam() {
      URIStringBuilder builder = new URIStringBuilder();
     
      builder
         .put("search", search).put("keyword", keyword)
         .put("order", order).put("direction", direction)
      ;
     
      return builder.toString();
   }
   
   public String getPagingParam() {
      URIStringBuilder builder = new URIStringBuilder();
     
      builder
         .put("size", size)
         .put("page", page)
      ;
     
      return builder.toString();
   }
   
   public String getAllParam() {
      return getSearchParam() + "&" + getPagingParam();
   }
}

 

SearchContext를 활용해 PageAndSortRepository 로 query 하기 위한 method 생성

protected PageRequest getPageRequest(S search) {
   
   if (StringUtils.isEmpty(search.getOrder())) {
      return new PageRequest(search.getPage() - 1, search.getSize());
   }
   else {
      return new PageRequest(
            search.getPage() - 1,
            search.getSize(),
            search.getDirection(),
            search.getOrder()
      );
   }
}

protected Specification<T> search(final S search) {
   return new Specification<T>() {
      @Override
      public Predicate toPredicate(
            Root<T> root,
            CriteriaQuery<?> query,
            CriteriaBuilder cb
      ) {
         List<Predicate> predicates = new ArrayList<Predicate>();
         
         String searchField = search.getSearch();
         String keyword = search.getKeyword();
         
         if (!StringUtils.isEmpty(keyword) && !StringUtils.isEmpty(searchField)) {
            predicates.add(cb.like(root.<String>get(searchField), "%" + keyword + "%"));
         }
         
         return cb.and(predicates.toArray(new Predicate[]{}));
      }
   };
}

 

이를 활용하여 DataTables.js 와 통신하기 위한 Controller 생성

@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public Page<T> list(S search) {
   Specification<T> spec = search(search);
   PageRequest pageable = getPageRequest(search);
   return service.findAll(spec, pageable);
}

 

DataTables.js customize

var columnsDefine = [
   { data: 'customer.customernm', column: 'customerseq' },
   { data: 'mine.minenm', column: 'mineseq' },
   { data: 'supply.supplynm', column: 'supplyseq' },
   { data: 'tagid', column: 'tagid' },
   { data: 'serialnumber', column: 'serialnumber' },
   { data: 'regdate', column: 'regdate' }
];

$('#dataTable').DataTable({
   processing: true,
   serverSide: true,
   ajax: {
      url: '${pageContext.request.contextPath}/admin/tag/api/list',
      /*dataSrc: 'content',*/
      data: function (d) {
         var data = {
            "page": parseInt(d.start / d.length) + 1,
            "size": d.length,
            "order": columnsDefine[d.order[0].column].column,
            "search": 'tagid',
            "direction": d.order[0].dir.toUpperCase(),
            "keyword": d.search.value
         };
         
         return data;
      },
      async: false,
      type: 'GET',
      dataFilter: function (data) {
         data = JSON.parse(data);
         
         var json = {
            recordsTotal: data.totalElements,
            recordsFiltered: data.numberOfElements,
            data: data.content
         };
         
         return JSON.stringify(json);
      }
   },
   columns: columnsDefine
});