DataTables示例 列的生成内容

在某些表中,您可能希望自动生成一些内容。这可以在一个 number of ways:

这个例子说明了 柱 s.defaultContentDT 创建一个 纽扣 element in the last 柱 of the table. A simple jQuery click event 侦听器用于监视该行的点击,并在激活后使用 row().data()DT 获取行数据的方法 show a bit of information about it in an alert box. This is a simple use case, but it can 建立起来是任意复杂的。

另请注意 柱 s.dataDT 列的选项 has been set to null to indicate that the 柱 has no information that should be 获取数据源对象。

名称 位置 办公室 扩展 开始日期 薪水
名称 位置 办公室 扩展 开始日期 薪水

下面显示的Javascript用于初始化此显示的表 example:

$(document).ready(function() { var table = $('#example').DataTable( { "ajax": "data/arrays.txt", "columnDefs": [ { "targets": -1, "data": null, "defaultContent": "<button>Click!</button>" } ] } ); $('#example tbody').on( 'click', 'button', function () { var data = table.row( $(this).parents('tr') ).data(); alert( data[0] +"'s salary is: "+ data[ 5 ] ); } ); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.