การใช้ Javascript Datatable เพื่อแสดงข้อมูลตาราง ด้วย Laravel + Ajax Jquery

Javascript Datatable เป็นเครื่องมือที่ดีให้ด้านนำเสนอข้อมูลในรูปแบบของตาราง ซึ่งสะดวกสบายในเรื่องการค้นหา การเรียงลำดับ และทำ pagination เอามากๆ เนื่องจาก Javascript จึงเป็นการประมวลฝั่ง Client จึงช่วยลดภาระการทำงานของ Server ได้ด้วย

ตัวอย่าง Javascript Datatable

DataTables example - Zero configuration

Part 1 : Database

สิ่งที่สำคัญที่สุดของระบบนี้ก็คือ ข้อมูลตำบล ในประเทศไทยหน้าตาประมาณนี้ี้

หลักๆ คือ มีข้อมูลต่างๆ ครบเลย ได้แก่

• 7,493 ตำบล
• 928 อำเภอ
• 77 จังหวัด
• 970 รหัสไปรษณีย์

สำหรับฐานข้อมูลก็ได้มาจากไฟล์ JSON นี้เลย raw_database.json ผมเลยเอาไปแปลงเป็น SQL/CSV ต่อและ import เข้าฐานข้อมูล

แต่สำหรับใครที่ใช้ SQL อยู่ถ้าอยากได้ไฟล์ SQL ก็มาโหลดตรงๆ ได้เลยที่นี่ districts.sql

arc6828/laravel_project

บางคนก็อาจจะบอกว่าควรแยกตารางออกเป็นตำบล อำเภอ จังหวัด เพื่อความเร็วในการ Query ก็อาจจะจริง แต่สำหรับผมขอรวบไว้ในตารางเดียวเลย

Part 2 : PHP Laravel Server

Model : สร้าง Model ที่ชื่อ District

php artisan make:model District

View : district/index.blade.php (แค่สร้างไฟล์)

<!-- หน้า View -->

API\Controller : สร้าง API/Controller

php artisan make:controller API\DistrictController

เพิ่มโค้ด

<?php
namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\District;
class DistrictController extends Controller
{
  public function index()
  {
    $district = District::all();
    return response()->json($district);
  }
  ...
}

Route :

routes/api.php

Route::get('/district','API\DistrictController@index');

routes/web.php

Route::get('/district' , function () {
    return view("district/index");
});

Part 2 : Client

HTML

<table id="table-example" class="table"></table>

CSS

<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">

JAVASCRIPT

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

JAVASCRIPT CUSTOM

<script>
$(document).ready(function(){
  var url = "{{ url('/') }}/api/district";
  var callback = function(result){
    var dataSet = [];
    result.forEach(function(element,index) {
      var row = [
        element.id,
        element.district,
        element.amphoe,
        element.province,
        element.zipcode,
      ];
      dataSet.push(row);
    }); //END FOREACH
    //console.log(dataSet);
    var table = $('#table-example').DataTable({
      "data": dataSet,
      "deferRender" : true,
      "columns": [
        { title: "id" },
        { title: "ตำบล" },
        { title: "อำเภอ" },
        { title: "จังหวัด" },
        { title: "zipcode" },
      ],
    }); // END DATATABLE
  };
  //CALL AJAX
  ajax(url,callback);
});
</script>