Phân trang giống vnexpress.net

Bùi Hồng Quân

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

Mình muốn phân trang giống như vnexpress.net
.
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é!

Bờm

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

Thuc Nguyen tan

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á!!!

Phu Le

@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)

Bờm

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()
}

Thuc Nguyen tan

@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?

Phu Le

@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,

Thuc Nguyen tan

@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

Phu Le

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

Bùi Hồng Quân

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