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

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