Tạo infinite scroll với laravel 5.3 và jscroll
Bài đăng này đã không được cập nhật trong 7 năm
Infinite Scroll là gì?
Infinite Scroll là hiệu ứng tải các bài viết kế tiếp bằng kỹ thuật AJAX sau khi cuộn trang tới một vị trí nào đó, chẳng hạn như kéo tới chân trang nó sẽ hiển thị các bài tiếp theo mà không cần bấm sang trang tiếp. Hôm nay mình sẽ hướng dẫn các bạn tạo một project sử dụng hiệu ứng này.
1. Tạo project laravel
Chúng ta sẽ tao project laravel với câu lệnh composer, các bạn cần cài đặt composer trước mới chạy câu lệnh này được 
)
Các câu lệnh command chúng ta trỏ tới thư mục gốc của ứng dụng rồi chạy nha.
composer create-project --prefer-dist laravel/laravel LaravelInfiniteScroll "5.3.*"
Cấu hình kết nối database trong file .env các bạn sửa lại cho đúng thông tin kết nối ở máy của chính mình, tạo file .env vào thưc mục gốc của app nếu chưa có
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=infiniteScrollDb
DB_USERNAME=root
DB_PASSWORD=12345678
2. Tạo model,view
tiếp theo chúng ta tạo model với câu lệnh:
php artisan make:model Models/Article
mở file model vừa được tạo, chúng ta thêm đoạn code sau
// xác định các cột có thể được thay đổi bời người dùng
protected $fillable = [
'title',
'content',
];
// đăt tên table
protected $table="articles";
tạo thư mục article trong folder "resources/views" tạo file index.blade.php trong "resources/views/article"
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel jScroll</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- import thử viện jquery và jscroll -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 >Article List</h1>
<hr>
<div class="infinite-scroll">
@foreach($articles as $article)
<h2><span>Title: {{$article->title}}</span></h2>
<h2><p>{{$article->content}}</p></h2>
<hr>
@endforeach
{{ $articles->links() }}
</div>
</div>
</div>
</div>
<script type="text/javascript">
// ẩn thanh phân trang của laravel
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
// xóa thanh phân trang ra khỏi html mỗi khi load xong nội dung
$('ul.pagination').remove();
}
});
});
</script>
</body>
</html>
ý nghĩ các thông số : autoTrigger => bằng true tự tải nội dung tiếp theo khi cuộn đến phần tử cuối cùng. loadingHtml => HTML để hiển thị ở cuối nội dung khi tải nội dung tiếp theo. padding => khoảng cách từ thanh scroll tới phần tử cuối cùng để tải nội dung tiếp theo. nextSelector => tìm đến liên kết trỏ đến tệp tiếp theo chứa nội dung được load. contentSelector => Bộ chọn chỉ để tải một phần nội dung trong phản hồi cho tập tiếp theo của nội dung. callback => hàm sẽ được gọi cuối mỗi trang tải.
3. Tạo database và dữ liệu để test
chạy câu lệnh sau để tạo 1 file định nghĩa cấu trúc table
php artisan make:migration create_article_table
mở file vừa tạo "database/migrations/y_m_d_create_article_table" chúng ta sửa lại như sau
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateArticleTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('articles', function(Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->string('content');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('articles');
}
}
để tạo dữ liệu test chúng ta sửa file database/seeds/DatabaseSeeder.php với nội dung sau:
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
// $this->call(UsersTableSeeder::class);
for ($i=0; $i < 50 ; $i++) {
DB::table('articles')->insert([
'title' => str_random(10),
'content' => 'Lorem ipsum inceptos malesuada leo fusce tortor sociosqu semper, facilisis semper class tempus faucibus tristique duis eros, cubilia quisque habitasse aliquam fringilla orci non.',
]);
}
}
}
run command sau để tạo table và dữ liệu ở database
php artisan migrate
php artisan db:seed
4. Tạo controller xử lí
run command:
php artisan make:controller ArticlesController
ở file vừa tạo chúng ta sửa lại như sau :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Article;
class ArticlesController extends Controller
{
//
public function index()
{
// phân trang với 5 record , khi scroll late, thì 5 record tiếp theo sẽ được load
$articles = Article::paginate(5);
return view('article.index', compact('articles'));
}
}
Thế là xong ^^, bây giờ các bạn có thể truy cập http://localhost/LaravelInfiniteScroll/public/ để test
Github: https://github.com/bacalepr1992/LaravelInfiniteScroll Hy vọng bài viết này sẽ giúp ích cho các bạn ^^.
All rights reserved
