为一列生成内容
在某些表格中，您可能希望自动生成一些内容。这可以通过多种方式完成
-
columns.render用于呈现动态内容（即基于行的 data） -
columns.defaultContent用于呈现静态内容（即简单字符串）
此示例展示了如何使用 columns.defaultContent 在表格的最后一列中创建 按钮 元素。使用一个简单的 click 事件监听程序来监控对行中按钮的点击，在激活时，使用 row().data() 方法来获取该行的 data，并通过 alert 框显示部分信息。这是一个简单的使用场景，但它可以构建得任意复杂。
还要注意，该列的 columns.data 选项已设置为 null，以表明数据源对象中不包含该列的信息。
| 姓名 | 职位 | 办公室 | 分机 | 开始时间 | 工资 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机 | 开始时间 | 工资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中展示的表格
var table = $('#example').DataTable({ ajax: 'data/arrays.txt', columnDefs: [ { data: null, defaultContent: '<button>点击</button>', targets: -1 } ] }); $('#example tbody').on('click', 'button', function () { var data = table.row($(this).parents('tr')).data(); alert(data[0] + "'的工资是: " + data[5]); });
var table = new DataTable('#example', { ajax: 'data/arrays.txt', columnDefs: [ { data: null, defaultContent: '<button>点击</button>', targets: -1 } ] }); table.on('click', 'button', function (e) { let data = table.row(e.target.closest('tr')).data(); alert(data[0] + "'的工资是: " + data[5]); });
除了上述代码外，还加载了以下 Javascript 库文件以用于此示例
下面显示的 HTML 是原始 HTML 表格元素，在它被 DataTables 增强之前
为了正确显示表格，此示例使用了一些额外的 CSS，它们超出了从库文件加载的 CSS（如下）。使用附加的 CSS 如下所示
以下 CSS 库文件被加载到本示例中，以提供表格样式
此表格通过 Ajax 加载数据。下面显示的最新已加载数据。此数据将随着任何其他数据的加载而自动更新。
用于对该表格执行服务端处理的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。服务端处理脚本可以使用任何语言编写，使用 DataTables 文档中描述的协议。