zoukankan      html  css  js  c++  java
  • datatables 给字段设置默认值,屏蔽没有字段的错误

    我们返回的数据不能保证都是正常的,可能包含 null ,显然这个对于最终用户来说是不友好的,那么我们可以这么处理

    先有如下数据格式:

    //示例数据
    
    {
        data:[
            {"id":1,"email":"thxopen@datatables.club","office":"Chengdu","first_name":null}
        ]
    }
    
    $('#example').DataTable( {
      "columns": [
        null,
        null,
        null,
        {
          "data": "first_name",
          // 为 null 或者 undefined 给出友好的提示, 还没有设置
    
          "defaultContent": "<i>还没有设置</i>"
        }
      ]
    } );

    或者更简单,粗暴的处理:

    $('#example').DataTable( {
      "columns": [
        null,
        null,
        null,
        {
          "data": "office",
          // 如果上面数居中office对于的值为 null 或者 undefined 则直接显示为空字符串
    
          "defaultContent": ""
        }
      ]
    } );

    当然 defaulContent 的用法还可以再强大点,比如给最后一列添加编辑按钮

    //使用 columnDefs 指定
    
    $('#example').DataTable( {
      "columnDefs": [
        {
          "data": null,
          "defaultContent": "<button>编辑</button>",
          "targets": -1  // 这里 -1 代表最后一列
    
        }
      ]
    } );
    
    // 使用 columns 指定
    
    $('#example').dataTable( {
      "columns": [
        null,
        null,
        null,
        {
          "data": null,
          "defaultContent": "<button>编辑</button>"
        }
      ]
    } );

    参考网址:http://datatables.club/manual/daily/2016/05/04/option-columns-defaultContent.html

    当你的才华还撑不起你的野心时
    那你就应该静下心来学习
    当你的能力还驾驭不了你的目标时
    那就应该沉下心来历练
  • 相关阅读:
    Postfix邮件
    RAID和LVM磁盘阵列
    CF1400G
    CF1400F
    2020 AC Saber夏季赛 游记
    APIO2018 题解
    2020北京中考游记
    初中数学几何推理大梳理
    CF1373F Network Coverage
    部编人教版初中历史书事件影响/意义汇总
  • 原文地址:https://www.cnblogs.com/yang-xiansen/p/10510154.html
Copyright © 2011-2022 走看看