DataTables示例 平面数组数据源

从Ajax源加载数据时,默认情况下,DataTables会在 data parameter of a returned object (e.g. { "data": [...] }). This can easily be change by using the dataSrc option of the ajaxDT 启动选项。

ajax.dataSrcDT 有多种方式 it can be used:

  • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in the source object.
  • As an empty string (e.g. dataSrc: '') - the data source is not an object but an array.
  • As a function (e.g. dataSrc: function(json) {}) - a function can be used to 将数据从一种源格式转换为另一种格式(例如,您可以将XML转换为 Javascript对象)。从函数返回的值用作表的数据。

以下示例显示 ajax.dataSrcDT 被用作 一个空字符串。这告诉DataTables,加载的JSON是一个纯数组,而不是带有 默认为其中的数组。

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

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

$(document).ready(function() { $('#example').dataTable( { "ajax": { "url": "data/objects_root_array.txt", "dataSrc": "" }, "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } ); } );

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

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

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

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

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

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