Ng-table: 서버 측 정렬, 필터링, 그룹화 및 페이지 매김의 예...

+1

+1

안녕하세요, ng-table은 클라이언트 라이브러리, 서버 부분만 원하는대로 만들 수 있습니다. 예를 들어 https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87 코드의 이 부분을 볼 수 있습니다.

@esvit - 요청은 서버 측 페이지 매김, 정렬, 그룹화, 필터링 등을 처리하는 ng-table의 완전한 예에 대한 것이었습니다. ng-table이 클라이언트 라이브러리라는 데 동의하지만 그러한 예는 많은 도움이 될 것입니다. 시나리오 중 원격 데이터와 함께 이 클라이언트 라이브러리를 사용하는 것이 포함됩니다...

@esvit 예, 우리가 원하는 것은 _해야_ 하는 방법, 즉 JSON 객체 ng-table이 기대하는 것을 보여주는 것입니다.

+1
필터링, 정렬 및 페이징의 클릭 이벤트를 가로채는 방법만 있어도 나머지는 서버에 연결하는 데 도움이 됩니다... 감사합니다.

훌륭한 도서관 btw ...

+1

+1

+1

정렬을 위해 사용자 정의 함수를 호출하는 좋은 방법이 있지만 필요하지 않은 경우 +1입니다.

헤더에 ng-click="sort(vars,directionToggle)"을 입력하고 정렬을 활성화된 상태로 둘 수도 있습니다. 그러면 방향 토글이 토글과 일치하는 한 화살표가 제대로 표시됩니다.
필터링은 약간 더 복잡합니다. ng-table 필터링을 비활성화하고 헤더에 완전히 사용자 정의 필터 입력을 추가하면 ng-table intergeneration에 대해 걱정할 필요가 없습니다.

거기에서 백엔드 데이터를 처리하고 올바른 데이터를 올바른 순서로 보내고 있는지 확인하는 것이 전부입니다. 그런 다음 해당 데이터를 연결하고 bam하면 ajax 정렬/필터링 테이블이 생깁니다.

+1

이것이 시작하는 데 도움이 되는 경우 서버 측 페이지 매김에 대한 예입니다. 클라이언트는 페이지 번호와 페이지 크기를 서버에 보내고 서버는 해당 페이지에 대한 데이터 행과 총 행 수를 응답 헤더로 반환합니다.

    $scope.tableParams = new ngTableParams({
      page: 1, count: 10
    }, {
      getData: function($defer, params) {
        var receiveData = function(data, responseHeaders) {
          // in my case, the server returns the total number of rows as a response header
          // call params.total(...) to tell ng-table the total number of rows
          params.total(responseHeaders("count"));

          // the server returns just the data for the current page, so can send it as is
          $defer.resolve(data);
        };

        // getData gets called when you click on a different page in the pagination links.
        // get the page number and size from params.$params
        var pageNumber = params.$params.page;
        var pageSize = params.$params.count;

        // set up the query parameters as expected by your server
        var queryParams = {"paging.pageSize":pageSize, "paging.pageNumber":pageNumber};

        // send an ajax request to your server. in my case MyResource is a $resource.
        MyResource.query(queryParams, receiveData);
      }
    });

누군가에게 도움이 되기를 바랍니다.
폭스 도넛

+1

+1

+1

정말 좋다

나는 그것이 조금 늦었다는 것을 알고 있지만 누군가가 서버 측 정렬 데이터를 표시하는 정말 좋은 예를했습니다.
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

나는 우리가 이것을 할 수 있는지 몰랐습니다. 이것은 문서에서 그렇게 명확하지 않습니다. :(

안녕하세요 폭스도넛 입니다.
당신은 의견이 정말 도움이 많이 되지만, 제가 새로운 것이므로 몇 가지가 명확하지 않습니다.
1# 수신 데이터가 함수에 인수로 전달되는 이유.
대신 내 ajax 함수를 호출할 때
MyResource.query(queryParams, 데이터 수신);
데이터를 표시하고 있지만 나중에 ajax가 반환되면 카운트가 새로 고쳐지지 않습니다. 그리고 아약스 코드 내에서 다시 로드를 사용하는 경우 무한 루프로 이동합니다.(

안녕하세요 @rbhargava25

수신 데이터가 함수에 인수로 전달되는 이유.

MyResource.query 는 비동기 함수이기 때문입니다. 서버에 요청을 하고 응답이 돌아오면 어떤 코드를 실행할지 알아야 합니다. 이 경우 receiveData _callback function_을 호출하는 것입니다.

도움이 되기를 바랍니다.

감사합니다 폭스도넛...
리소스 대신 간단한 http 요청을 사용하겠습니다.