--
參考資源
關鍵就是必須要把 js 放在 initComplete: 內
--
應用
HTML
|
1 2 3 4 5 6 |
<!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- bootstrap 5 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> |
JavsScript
|
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 |
let data_table = $table.DataTable({ fixedHeader: true, serverSide: true, dom: '<"top"i>rt<"bottom"flp><"clear">', displayLength: 30, // 預設每頁筆數 lengthChange: false, language: { url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/zh-HANT.json' }, searching: false, scrollX: true, scrollCollapse: true, Info: false, ordering: false, order: [], ajax: { url: '/v2/Stock_item/select', type: 'POST', data: function (d) { d['search'] = $id_form_search.serialize(); }, }, initComplete: function(settings, json) { $('[data-bs-toggle="tooltip"]').tooltip( ); }, columns: [ { data: 'id', createdCell: function (cell, cellData, rowData, rowIndex, colIndex) { $(cell).attr('data-title', 'id') }, }, { data: 'create_time', createdCell: function (cell, cellData, rowData, rowIndex, colIndex) { $(cell).attr('data-title', '建立日期') }, }, { data: 'name', createdCell: function (cell, cellData, rowData, rowIndex, colIndex) { $(cell).attr('data-title', '名稱') }, }, { data: null, render: function (data, type, row) { let r = ''; r += '<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-custom-class="primary-tooltip" data-bs-title="編輯" onclick="modal_edit(' + data['id'] + ', this)"><i class="fa-solid fa-pen-to-square"></i></button> '; r += '<button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="danger-tooltip" data-bs-title="刪除" onclick="modal_delete(' + data['id'] + ')"><i class="fa-solid fa-ban"></i></button>'; return r; } } ], }); |
--
946 total views, 1 views today