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

    当你的才华还撑不起你的野心时
    那你就应该静下心来学习
    当你的能力还驾驭不了你的目标时
    那就应该沉下心来历练
  • 相关阅读:
    第二周作业
    第二次作业
    第一周作业
    我的2018年终总结
    css总结
    python中使用selenium错误-Firefox浏览器
    postman中 form-data、x-www-form-urlencoded、raw、binary的区别
    谷歌地图API(一)
    2014新年开题
    图书馆管理系统-需求分析
  • 原文地址:https://www.cnblogs.com/yang-xiansen/p/10510154.html
Copyright © 2011-2022 走看看