zoukankan      html  css  js  c++  java
  • 解决 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=" 70px;height: 50px" /> // `;
    // html添加到td中
    td.html(html); }
    });

    效果图:

     复选框的value显示正确

  • 相关阅读:
    【JZOJ4928】【NOIP2017提高组模拟12.18】A
    【JZOJ4922】【NOIP2017提高组模拟12.17】环
    【JZOJ4923】【NOIP2017提高组模拟12.17】巧克力狂欢
    【JZOJ4924】【NOIP2017提高组模拟12.17】向再见说再见
    【JZOJ4919】【NOIP2017提高组模拟12.10】神炎皇
    【JZOJ4920】【NOIP2017提高组模拟12.10】降雷皇
    【JZOJ4921】【NOIP2017提高组模拟12.10】幻魔皇
    【罗宾欺诈者】回环符文——回文树(回文自动机)
    【怪物】KMP畸形变种——扩展KMP
    【51NOD1304】字符串的相似度
  • 原文地址:https://www.cnblogs.com/zqblog1314/p/12734732.html
Copyright © 2011-2022 走看看