Category Archive jQuery

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

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

   1 2 3 4

   //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
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

   $(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 ในหน้าที่จะเรียกใช้ เช่น
   ?

   1 2 3 4 5

   <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