데이터테이블 컬럼필터링 적용 문제

boingboing·2022년 3월 23일
0

Server-side processing

  • There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides.
  • With server-side processing enabled, all actions that DataTables performs (such as paging, searching and ordering) are handed off to a server / where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!).
  • As such, each draw of the table will result in a new Ajax request to get the required data.
    (출처: 공식문서(https://datatables.net/manual/server-side))

Column filtering

  • FixedHeader의 예제 중 하나

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
https://datatables.net/reference/api/column().search()

적용 문제..

현상

https://stackoverflow.com/questions/58497592/datatable-column-filtering-not-working-server-side
-> 나랑 똑같은 질문인데 답없음..

https://phppot.com/demo/column-search-in-datatables-using-server-side-processing/

PHP로 Serverside & individual column filter 한 예제.
  • This example demonstrates FixedHeader being used with individual column filters,
  • placed into a second row of the table's header (using $().clone()).
  • 공식 문서의 예제에서 initComplete라는 콜백 조건을 사용하는데,
    이건
    It can often be useful to know when your table has fully been initialised, data loaded and drawn, particularly when using an ajax data source.
  • In such a case, the table will complete its initial run before the data has been loaded (Ajax is asynchronous after all!)
  • so this callback is provided to let you know when the data is fully loaded.

Additionally the callback is passed in the JSON data received from the server when Ajax loading data, which can be useful for configuring components connected to your table, for example Editor fields.

  • 기본 예제 테이블로는 column filtering 잘됨

  • 내 테이블로 컬럼 필터링이 안된다!!

  • 헤더까진 제대로 된다.

  • 검색 input에 넣으면 검색이 않된다.

원인이 뭘까?

  1. 이벤트가 제대로 발생안한다
  2. search가 안된다
  3. draw가 안된다
  • I've created this little example which demonstrates how it might be done: http://live.datatables.net/piqidoqo/1/edit .

  • One key element is to use the initComplete callback - this is important for Ajax sourced tables since they are of course asynchronous by definition.

  • By definition Server Side Processing means that all sorting, searching and paging functions are performed by the server.

  • Even if it were possible to use client side filtering it would only affect the data at the client, which is the page being displayed.

  • It is not possible to use client side filtering with server side processing enabled.

비슷한 문제의 답 (dataTable에 select박스 적용)

  • The problem is that you're using serverSide processing - this means that only the rows being displayed are sent to the client,
    so when you build your dropdown list in the initComplete function,
    you will only ever see items sent for that very first page.

  • serverSide is only really needed if you have thousands of records, if you don't, and the dropdowns are more important, just remove that initialisation option.

  • 즉, serverside옵션은 오직 서버에서 보낸 row만 출력한다.

  • 백날 javascript상에서 search() 함수 적용 후 draw() 해도 안 된다.

  • search() 하면, serverside로 ajax 요청 보냄. POST element의 [search] value만 바뀌어서.

https://datatables.net/forums/discussion/31765/server-side-with-individual-column-searching-text-inputs

0개의 댓글