Laravel 8 Phân Trang Sử Dụng Ajax Kết Hợp Với Tìm Kiếm Và Sắp Xếp

I. Gợi ý tìm kiếm tìm với ajax vào Laravel.

Bạn đang xem: Laravel 8 phân trang sử dụng ajax kết hợp với tìm kiếm và sắp xếp

Chào những bạn! Hôm nay mình xin giới thiệu biện pháp hiển thị gợi ý lúc kiếm tìm kiếm vào laravel bởi ajax, bản thân xin phân thành 2 bài xích.

Bài 1 mình sử dụng ajax.Bài 2 mình sử dụng Typeahead một thỏng viện cung cấp cho bài toán gợi nhắc tìm kiếm kiếm của JavaScript hết sức rất được yêu thích.Trước khi đến với tìm kiếm tìm áp dụng ajax chúng ta sẽ tạo nên số đông ĐK bắt buộc nhằm thử nghiệm code ajax tra cứu tìm coi nó bao gồm hoạt động hay là không. Các bạn có thể áp dụng trực tiếp code ajax vào thành phầm đã có tác dụng bằng phương pháp kéo nkhô cứng xuống bên dưới với copy đoạn code ajax nhằm áp dụng với ĐK các bạn vẫn biết chút đỉnh về ajax.Crúc ý: các câu lệnh chạy vào command đối với win và terminal cùng với unbutu nhé!

1. Tạo bảng tài liệu để search kiếm.

1.1 Tạo bảng cùng với migrate.

Tất nhiên rồi, tra cứu tìm thì cần phải có bảng tài liệu để tra cứu tìm chứ đọng đúng không ạ nào. Mình chế tạo ra bảng có tên là "products" nhé!

php artisan make:migration products --create=productsCác chúng ta vào database với msinh hoạt file ...products.php lên mang đến nó vài trường tài liệu như thế nào (Mình sẽ tìm kiếm kiếm với "name_product").

use IlluminateSupportFacadesSchema;use IlluminateDatabaseSchemaBlueprint;use IlluminateDatabaseMigrationsMigration;class Products extends Migration /** * Run the migrations. * *
return void */ public function up() Schema::create("products", function (Blueprint $table) $table->increments("id"); $table->string("name_product"); $table->timestamps(); ); /** * Reverse the migrations. * *
return void */ public function down() Schema::dropIfExists("products"); Mình chế tạo ngôi trường "name_product" nhằm search kiếm cùng với nó những bạn muốn search kiếm cùng với ngôi trường như thế nào thì cấp dưỡng với có thể thêm tùy ý miễn sao để ý lúc truy hỏi vấn dữ liệu để không trở nên nhầm thương hiệu là được.Bây tiếng chúng ta tạo ra bảng cùng với câu lệnh.

php artisan migrateCrúc ý là nhằm chạy migrate các bạn lưu giữ cấu hình mang đến tệp tin .env với chế tạo ra tên database tương xứng nhéDB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=shopDB_USERNAME=rootDB_PASSWORD=Các các bạn tìm với thông số kỹ thuật file .env nhé! Các chúng ta để ý thông số kỹ thuật cho cân xứng. Tên database của chính bản thân mình là "shop" còn những bạn có thể chế tác database khác với kết nối mang lại đúng là được.

1.2 Tạo tài liệu mẫu cùng với seeder.

Để chế tạo tài liệu chủng loại những chúng ta cũng có thể chế tạo trực tiếp trong cửa hàng dữ liệu, bản thân thì say đắm sử dụng seeder hơn. Câu lệnh sản xuất seeder.

php artisan make:seeder ProductTableSeederquý khách vào seeds msinh hoạt tệp tin vừa chế tác lên để thêm tài liệu chủng loại vào.

Xem thêm: Bật Mí Cách Làm Gọn Lông Vùng Kín Tại Nhà, Bật Mí Cách Tỉa Lông Vùng Kín Đơn Giản Nhất

use IlluminateDatabaseSeeder;class ProductTableSeeder extends Seeder /** * Run the database seeds. * *
return void */ public function run() // $data = < < "name_product"=>"iPhone", >, < "name_product"=>"Samsung", >, < "name_product"=>"HTC", >, < "name_product"=>"Huawei", >, < "name_product"=>"Oppo", >, >; DB::table("products")->insert($data); Giờ chạy seeder như thế nào.

php artisan db:seed --class=ProductTableSeeder

1.3 Tạo routes.

Quý khách hàng vào web.php thêm vào cho bản thân hai routes nhỏng sau.

Route::get("search", "");Route::post("search/name", "")->name("search");

1.4 chế tạo Controller.

Có routes rồi thì phải lập controller để chạy chđọng đúng không nào. Lệnh sản xuất controller, tại đây mình sản xuất controller mang tên là "SearchController" những bạn có thể viết tên khác tùy say mê nhưng lại buộc phải trùng cùng với route nhé.

php artisan make:controller SearchController

1.5 Tạo view.

Bạn vào view và tạo cho mình một view với tên là "searchajax.blade.php" cùng chế tác dao diện search nlỗi sau.

3. Gợi ý tìm kiếm kiếm cùng với ajax.

Bây tiếng bắt đầu mang đến phần bao gồm.Trong view bạn thêm đoạn code ajax nhằm kiếm tìm tìm với hiển thị nhỏng sau.

namespace AppHttpControllers;use DB;use IlluminateHttpRequest;class SearchController extends Controller public function getSearch(Request $request) return view("searchajax"); function getSearchAjax(Request $request) if($request->get("query")) $query = $request->get("query"); $data = DB::table("products") ->where("name_product", "LIKE", "%$query%") ->get(); $output = ""; foreach($data as $row) $output .= " "; $output .= ""; emang lại $output; vậy là ok rồi đó các bạn, vô cùng đơn giản và dễ dàng phải ko nào.Lưu ý:quý khách hàng rất có thể sửa đổi hiển thị tùy ý bởi cấu hình trong controller nlỗi thêm đường dẫn, hiển thị thêm hình ảnh, thương hiệu, ... Thậm chí các bạn còn css được.vd: $output = ""; foreach($data as $row) $output .= "

*
img.""> abc

"; $output .= "";Quý khách hàng rất có thể trả về tài liệu kiểu json và hiểu json đấy bên code của ajax bằng phương pháp trả về giao diện dữ liệu json nạm bởi loại htmlvd: return response()->json($products);4 Kết luân.

Vậy là mình đã lý giải song gợi ý tìm kiếm tìm cùng với ajax, sinh sống bài sau mình vẫn reviews cách sử dụng Typeahead nhằm lưu ý search tìm. Vì là thư viện cần Typeahead cung ứng cực tốt đến bài toán này các bạn ạ. Với Typeahead bản thân đã sử dụng giải pháp trả về tài liệu dạng json cùng phương pháp phát âm json nhằm hiển thị nhé. Còn giải pháp trả về dạng html như bài bác này không rất được yêu thích bởi khó khăn tái áp dụng code cho các mục tiêu không giống nhau vd như chúng ta làm app nhưng lúc phát âm dữ liệu website mà nó trả về dạng html thì bạn đọc sấp mặt rồi. Nhớ chăm chú coi bài bác tiếp theo sau về Typeahead của bản thân mình nhé. Mọi thắc mang phần nhiều bạn bình luận trong nội dung bài viết này. thanks!