Phân trang giống vnexpress.net



  • Mình đang viết một task hiển thị nội dung bình luận như hình bên dưới
    0_1507002626243_image.png

    Mình muốn phân trang giống như vnexpress.net
    0_1507002687860_image.png .
    Tức là click vào nút xem thêm sẽ show thêm nội dung.Các bạn cho mình giải pháp với.nghĩ mãi chả ra.haizz.
    P/s:mình dùng angularjs để làm nhé!



    • Data từ server trả về nên cần có thêm 1 cặp query ở request để xác định số records sẽ nhận về. Ví dụ: ?page=0&limit=10 (1 lần trả về 10 bình luận)
    • Tạo 1 biến scope.xyz để lưu số records đó lại
    • Nhấn "Xem thêm" thì tăng page lên 1 rồi request lại -> ?page=1&limit=10
    • Concat data mới nhận được với scope.xyz
    • Check thêm nếu số records nhận về < limit (10) đồng nghĩa đã hết data từ server, thì ẩn nút "Xem thêm" đi, nếu = limit (10) thì giữ nguyên flow nhấn "Xem thêm" ở trên
    • Cái này tuỳ thuộc server trả data về ntn, nhưng cơ bản là như vậy, chúc bạn làm thành công


  • Concat data! mới nhận được với scope.xyz
    Concat data là làm sao bạn?, mình chậm tiêu quá!!!



  • @Thuc-Nguyen-tan said in Phân trang giống vnexpress.net:

    Concat data! mới nhận được với scope.xyz
    Concat data là làm sao bạn?, mình chậm tiêu quá!!!

    Logic :

    • Lúc đầu hiển thị list comment lấy 10 comment ( page =1) , giữ biến page = 1
    • Khi người dùng click button, lấy 10 comment tiếp theo ( page = 1 + 1 = page =2 )
    • Khi người dùng click button , thì lấy 10 comment tiếp theo ( page = 2 + 1 = page =3)


  • Cơ bản là biến đó sẽ store các comments fetch được từ server về để hiển thị ra view, làm như dưới này. Lâu không dùng Ang1 nên không biết cú pháp có đúng không nữa

    $scope.comments = []
    $scope.pagination = {
      page: 0,
      limit: 20
    }
    
    $scope.load = () => {
       // Load data từ server về với page/limit
       Service.load({
          ...,
          page: $scope.pagination.page,
          limit: $scope.pagination.limit
       }).then({ comments }=> {
          // Nối comments vừa nhận được từ server với biến $scope.comments
          $scope.comments = $scope.comments.concat(comments)
    
          // Check hết dữ liệu chưa để ẩn nút "Xem thêm"
          if ($scope.pagination.limit > comments.length) {
             // Hết dữ liệu, ẩn nút xem thêm đi
             ...
          }
       })
    }
    
    // Khi nhấn nút "Xem thêm"
    $scope.loadMore = () => {
      $scope.pagination.page++
      $scope.load()
    }
    


  • @Phu-Le

    Vậy lúc đầu $scope.ds.length=10;
    bấm một cái :
    for(x in ds){
    $scope.ds.push(ds[x]);
    }

    bấm thêm cái nữa :
    for(x in ds){
    $scope.ds.push(ds[x]);
    }

    ... và vv

    phải không bạn?



  • @Thuc-Nguyen-tan

    Lúc đầu get list page 1 ra
    $scope.page =1 ;
    $scope.listData = result json danh sách page= $scope.page ra

    bấm một cái :
    ++ $scope
    Array.prototype.push.apply($scope.listData, result json danh sách page= $scope.page ra ); // gộp 2 cái vào $scope.listData,
    bấm một cái nữa :
    ++ $scope
    Array.prototype.push.apply($scope.listData, result json danh sách page= $scope.page ra ); // gộp 2 cái vào $scope.listData,



  • @Phu-Le

    $scope.comments = $scope.comments.concat(comments)

    comments dạng gì?

    Trong khi js concat(st1,st2,...)

    var str1 = "Hello ";
    var str2 = "world!";
    var str3 = " Have a nice day!";
    var res = str1.concat(str2, str3);

    ???
    Mình không lầm thì type of comments là json



  • @Thuc-Nguyen-tan
    1 comment là json
    nhưng list comment là Arrray



  • cám ơn mọi người mình đã xử lý được rồi.Cám ơn mọi người rất nhiều


Log in to reply