--
參考資源
--
|
1 2 3 4 5 |
$('#example').DataTable({ processing: true, serverSide: true, ajax: '../server_side/scripts/server_processing.php', }); |
- serverSide: true 開啟 Server-side
- processing: true 開啟加載動畫，預設是 false，Hoyo 使用另外的加載方式，下面會講到
- ajax 從 Server 取資料，DataTable 會提供資料起始、結束筆數，所以後端就不需要計算筆數起始很方便
--
ajax 傳遞參數
DataTable 的 Server-side ajax 一定要用變數傳遞過去，不能像 jQuery ajax 一樣使用 data: $('#id_form_search').serialize() 這樣將整個表單傳遞，
|
1 2 3 4 5 6 7 8 |
ajax: { url: '/admin/v2/User/select', type: 'POST', data: function (d) { d.id = id_form_search.find('[name="id"]').val(); d.Name = id_form_search.find('[name="Name"]').val(); }, } |
- type: 'POST' HTTP method 如果沒有非 GET 不可都是 POST 不用討論
- data: function(d){} 自定義搜尋條件時設定
--
一定要使用 .serialize()
如果一定要使用 .serialize() 那就必須繞個圈，將表單對應到一個變數內
|
1 2 3 4 5 6 7 |
ajax: { url: '/ajax.php', type: 'POST', data: function (d) { d['search'] = $id_form_search.serialize(); }, } |
ajax.php
|
1 |
parse_str($_POST['search'], $post); |
使用 PHP parse_str() 就可以將 JavaScript serialize() 轉換回 PHP 的陣列
--
Ajax 事件
前面將 ajax 加載關閉，因為要換上自己的 ajax loader，這時就要套上 Event
一般使用的就是 preXhr.dt 執行 ajax 前以及 xhr.dt ajax 完成這兩個 event
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
let $table = $('#id_table_1'); // ajax 前加載... $table.on('preXhr.dt', function() { $.LoadingOverlay("show", { background: "rgba(100,100,100,0.1)", size: "8", }); }); // 完成 $table.on('xhr.dt', function() { $.LoadingOverlay("hide"); $('html, body').animate({ scrollTop: $(".dataTables_wrapper").offset().top }, 10); }); |
--
彈窗訊息
如果 ajax 有回傳訊息需要顯示或處理，也是使用 xhr.dt event 來處理
這裡的範例剛好和我的使用環境一致，直接使用即可
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const $table = $('#id_table_1'); $table.on('xhr.dt', function(e, settings, json, xhr) { if ( json['message'] ){ new jBox('Notice', { content: '錯誤！' + json['message'], color: 'red', position: {x: 'center', y: 'center'}, zIndex: 12000, autoClose: 3000 }); } }); |
--
561 total views, 1 views today