<!-- 1. jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

<!-- 2. DataTables 樣式 -->
<link rel="stylesheet"  rel="external nofollow" >

<!-- 3. DataTables 腳本 -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>手機號</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 數(shù)據(jù)行（靜態(tài)/動態(tài)渲染） -->
  </tbody>
</table>

$(function(){
  // 模擬數(shù)據(jù)
  var tableData = [
    { id: 1, name: "張三", phone: "13800138000" },
    { id: 2, name: "李四", phone: "13900139000" }
  ];

  $('#myTable').DataTable({
    data: tableData,
    // 列配置：綁定字段、表頭
    columns: [
      { data: "id", title: "ID" },
      { data: "name", title: "姓名" },
      { data: "phone", title: "手機號" },
      { data: null, title: "操作" } // 無綁定字段，放按鈕
    ]
  });
});

$('#myTable').DataTable({
  // 開啟服務端分頁（大數(shù)據(jù)必開）
  serverSide: true,
  // 請求接口
  ajax: {
    url: "/api/getList",
    type: "POST"
  },
  columns: [
    { data: "id" },
    { data: "name" },
    { data: "phone" },
    // 自定義單元格：渲染按鈕、HTML
    { 
      data: null,
      render: function(row){
        // row = 當前行所有字段
        return `<button class="edit" data-id="${row.id}">編輯</button>
                <button class="del" data-id="${row.id}">刪除</button>`;
      }
    }
  ]
});

{
  "draw": 1,
  "recordsTotal": 100,    // 總數(shù)據(jù)條數(shù)
  "recordsFiltered": 100, // 篩選后條數(shù)
  "data": [
    {"id":1,"name":"張三","phone":"13800138000"}
  ]
}

$('#myTable').DataTable();

$('#myTable').DataTable({
  // 1. 分頁相關
  paging: true,        // 開啟分頁（默認true）
  pageLength: 10,      // 每頁條數(shù)
  lengthMenu: [5,10,20,50], // 每頁條數(shù)選擇器

  // 2. 搜索、排序
  searching: true,     // 開啟全局搜索
  ordering: true,      // 開啟列排序
  order: [[0, "desc"]],// 默認排序：第0列 倒序(desc)/正序(asc)

  // 3. 語言漢化（關鍵，默認英文）
  language: {
    "sProcessing": "加載中...",
    "sLengthMenu": "每頁 _MENU_ 條",
    "sZeroRecords": "暫無數(shù)據(jù)",
    "sInfo": "當前 _START_ - _END_ 條，共 _TOTAL_ 條",
    "sInfoEmpty": "暫無數(shù)據(jù)",
    "sSearch": "搜索：",
    "oPaginate": {
      "sFirst": "首頁",
      "sPrevious": "上一頁",
      "sNext": "下一頁",
      "sLast": "末頁"
    }
  },

  // 4. 列配置
  columns: [
    { data: "id", width: "80px" }, // 設置列寬
    { data: "name", orderable: false }, // 禁止當前列排序
    { data: "phone", searchable: false } // 禁止當前列參與搜索
  ],

  // 5. 動態(tài)樹形（結合你之前學的 treeGrid）
  treeGrid: {
    left: 20,
    expandAll: false
  }
});

{
  data: "status",
  render: function(val){
    // val = 當前字段值
    return val === 1 ? "<span style='color:green'>正常</span>" 
                     : "<span style='color:red'>禁用</span>";
  }
}

{
  data: null,
  render: function(row){
    return `<button class="btn-edit" data-id="${row.id}">編輯</button>
            <button class="btn-del" data-id="${row.id}">刪除</button>`;
  }
}

var table = $('#myTable').DataTable();

// 本地數(shù)據(jù) / 前端分頁 刷新
table.draw();

// AJAX 接口 重新請求數(shù)據(jù)（常用）
table.ajax.reload();

table.clear().draw();

// 徹底銷毀實例
table.destroy();

// 當前頁數(shù)據(jù)
var pageData = table.rows().data();

table.page(2).draw(false); // 跳轉到第3頁（索引從0開始）

// 委托給 table，監(jiān)聽內部 .btn-del 點擊
$('#myTable tbody').on('click', '.btn-del', function(){
  // 獲取當前行 id
  var id = $(this).data('id');
  
  // 結合 swal 確認框
  Swal.fire({
    title: "確定刪除？",
    icon: "warning",
    showCancelButton: true
  }).then(res => {
    if(res.isConfirmed){
      $.post("/api/delete", {id:id}, function(){
        Swal.fire("刪除成功","","success");
        table.ajax.reload(); // 刷新表格
      });
    }
  });
});

$('#myTable').DataTable({
  ajax: "/api/getTreeData",
  columns: [
    { defaultContent: "", width: "30px" }, // 樹形圖標列
    { data: "name", title: "名稱" },
    { data: "remark", title: "備注" }
  ],
  // 樹形配置
  treeGrid: {
    left: 20,
    expandAll: false
  },
  // 樹形表格建議關閉分頁
  paging: false
});