TypeScript: Datatables

หลังจากที่ใส่ 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