解決 datatables 自定義列 checkbox 復選框 問題

需要做批量刪除，又用到datatables

難點：在第一列插入復選框

直接貼代碼

html：

<table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>  復選框
                <th width="40">ID</th>
                <th width="80">房東名稱</th>
                <th width="40">性別</th>
                <th width="40">年齡</th>
                <th width="80">聯系方式</th>
                <th width="100">身份證號</th>
                <th width="150">家庭地址</th>
                <th>身份證照片</th>
                <th width="120">郵箱</th>
                <th width="130">加入時間</th>
                <th width="100">操作</th>
            </tr>
            </thead>
        </table>

 

js：

// dataTables表格 顯示
             dataTable = $('.table-sort').DataTable({
                // 下接的分頁數量
                lengthMenu: [5, 10, 15, 20, 100],
                //保持在當前頁碼
                stateSave: true,
                // 隱藏搜索
                searching: false,
                 // order:[0,'asc'],
                autoWidth: true,
                columnDefs: [
                    // 索引第3列，不進行排序
                    {targets: [0,7,10], orderable: false},
　　　　　　　　　　　　//*重點開始
                    {
                            targets: [0], // 目標列位置，下標從0開始
                            bSortable: false,//是否排序
                            render: function(id, type, data) { // 返回自定義內容
                                return `<input type="checkbox" value="${id}" name="id[]">`;
                            }
                    }
　　　　　　　　　　　　//重點結束
                ],

                // 開啟服務器端分頁 開啟ajax
                serverSide: true,
                // 進行ajax請求
                ajax: {
                    // 請求地址
                    url: 'url',
                    // 請求方式
                    type: 'get',
                    // 參數 動態獲取表單數據用 function
                    data: function (ret) {
                        ret.datemin = $('#datemin').val();
                        ret.datemax = $('#datemax').val();
                        ret.keywords = $.trim($('#keywords').val());
                    }
                },
                // 指定每一列顯示的數據
                columns: [
                    //{'data': '字段名稱1', "defaultContent": "默認值", 'className': '類名'}, 還可以添加默認值，解決 添加 自定義列 的問題

    {data: 'id', className: 'text-c'},//這里就是　　復選框　　*重點 也可以隨便起名字比如叫check {data: 'check', className: 'text-c'},

 {data: 'id', className: 'text-c'},//這里是id列

 {data: 'name', className: 'text-c'}, 
{data: 'sex', className: 'text-c'}, 
{data: 'age', className: 'text-c'},
 {data: 'phone', className: 'text-c'}, 
{data: 'card', className: 'text-c'}, 
{data: 'address', className: 'text-c'}, 
{data: 'pic', className: 'text-c'}, 
{data: 'email', className: 'text-c'}, 
{data: 'created_at', className: 'text-c'}, 
{data: 'aaa', defaultContent: '默認值'} ], 

// 回調方法 
// row 當前行的dom對象 
// 當前行的數據 
// 當前行的數據索引 
createdRow: function (row, data, dataIndex)
 { 
// console.log(data); 
// 當前id 
let id = data.id;
//當前 icon地址
 // var iconUrl = data.icon; 
// 行的最后一列 
let td = $(row).find('td:last-child');
 //行的第三列 // 
var td1 = $(row).find('td:eq(2)'); 
// var name = $(row).find('td:eq(1)'); 
// var td = $(row).find('td:3'); 
// 顯示的html內容 
let html = ` <a href="/admin/fangowner/${id}/edit" class="label label-secondary radius">修改</a> 
<a href="/admin/fangowner/${id}" onclick="DelFangAttr(event,this)" class="label label-warning radius">刪除</a>  `; 
// var html1 = ` // <img src="${iconUrl}" style="width: 70px;height: 50px" /> // `; 
// html添加到td中  
td.html(html); } 
});

效果圖：

 

 

 復選框的value顯示正確