ป้ายกำกับ: เจเควียรี

หลังจากที่ใส่ JQuery และ Font Awesome ไปแล้วที่นี้เราก็มาลองใช้จริงโดยใช้ DataTables.net ทั้งการใช้เจเควียรีและฟอนต์ รวมถึงการใช้ตัวแปร variable ต่าง ๆ ในไฟล์

1. เพิ่ม Datatables โดย command
   npm install datatables.net-dt
2. เปิดไฟล์ SourceCode/resources/js/app.ts
3. เพิ่ม code หลัง jQuery

   //jQuery.DataTables.net
   import 'datatables.net';
   import 'datatables.net-dt';
   import 'datatables.net-dt/css/dataTables.dataTables.min.css';
   

4. สร้าง code ที่เรียกใช้ jQuery และ Datatables.net ตามปกติ เช่น SourceCode/public/assets/tickets.list.js

   $(document).ready(function () {
    $('#tickets-list').DataTable(
     {
      ajax: {
       headers: {
        'X-CSRF-TOKEN': csrf_token,
        'X-Requested-With': 'XMLHttpRequest'
       },
       type: 'GET',
       url: base + '/tickets'
      },
      columns: [
       {
        orderable: false,
        render: function (data, type, row, meta) {
         return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
        },
        title: 'No.',
        width: '10px'
       },
       {
        orderable: false,
        render: function (data, type, row, meta) {
         return '<input type=checkbox value="' + row.DISTRICT_CODE + '">';
        },
        title: '<input class="checkAll" type="checkbox">',
        width: '10px',
       },
       {
        data: 'id',
        name: 'id',
        orderable: true,
        title: 'ID',
        width: '10px'
       },
       {
        data: 'category_id',
        orderable: true,
        render: function (data, type, row) {
         return row.category;
        },
        title: 'Category'
       },
       {
        data: 'vessel_id',
        orderable: true,
        render: function (data, type, row) {
         return row.vessel;
        },
        title: 'Vessel'
   
       },
       {
        data: 'service_line_id',
        orderable: true,
        render: function (data, type, row) {
         return row.service_line;
        },
        title: 'Service Line'
       },
       {
        data: 'support_engineer_id',
        orderable: true,
        render: function (data, type, row) {
         return row.support_engineer;
        },
        title: 'Support Engineer'
       },
       { data: 'sla_dt' },
       { data: 'working_time' },
       {
        orderable: false,
        render: function (data, type, row) {
         return '<a href="' + base + '/tickets"><i class="fa fa-pen"></i> Edit</a> | ' +
          '<a href="' + base + '/tickets"><i class="fa fa-trash"></i> Delete</i></a>';
        },
        width: '200px'
       }
      ],
      lengthMenu: [10, 25, 50, 75, 100],
      order: [[0, 'asc']],
      pageLength: 10,
      processing: true,
      serverSide: true,
      stateSave: true,
     }
    );
   });
   

5. จากนั้นเพิ่ม code ในหน้าที่จะเรียกใช้ เช่น

   <script type="module">
   	window.base = '{{ url('') }}';
   	window.csrf_token = '{{ csrf_token() }}';
   </script>
   <script src="{{ asset('assets/tickets.list.js') }}" type="module"></script>
   

6. ทดลองเปิดหน้าขึ้นมาทดสอบ

อธิบาย

บรรทัดที่ 1 <script type=”module”> จะใช้ JavaScript ES module นะ
บรรทัดที่ 2 – 3 คือประกาศตัวแปรระดับ window ให้ SourceCode/public/assets/tickets.list.js สามารอ้างอิงได้ เช่น base และ csrf_token