Javascript 源数据
有时会希望能够使用直接传递给 DataTables 的动态信息创建表，而不是从文档中读取表。这是通过初始化对象中的 data 选项实现的，传入要使用的数据数组（与所有其他 DataTables 处理的数据一样，可以使用数组或对象使用 columns.data 选项）。
页面上必须有一个 table 可供 DataTables 使用。此示例显示了如何将一个空的 table 元素初始化为具有 Javascript 数组数据集的 DataTable。表中的列根据 columns.title 配置选项动态创建。
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中显示的表
var dataSet =[['老虎 尼克松', '系统架构师', '爱丁堡', '5421', '2011/04/25', '$320,800'], ['加勒特 温特斯', '会计师', '东京', '8422', '2011/07/25', '$170,750'], ['阿什顿 考克斯', '初级技术作者', '三藩市', '1562', '2009/01/12', '$86,000'], ['塞德里克 凯利', '高级 Javascript 开发人员', '爱丁堡', '6224', '2012/03/29', '$433,060'], ['爱丽 萨藤', '会计师', '东京', '5407', '2008/11/28', '$162,700'], ['布里埃尔 威廉森', '集成专家', '纽约', '4804', '2012/12/02', '$372,000'], ['赫罗德 钱德勒', '销售助理', '三藩市', '9608', '2012/08/06', '$137,500'], ['罗娜 戴维森', '集成专家', '东京', '6200', '2010/10/14', '$327,900'], ['科琳 赫斯特', 'Javascript 开发人员', '三藩市', '2360', '2009/09/15', '$205,500'], ['索尼娅 弗罗斯特', '软件工程师', '爱丁堡', '1667', '2008/12/13', '$103,600'], ['杰娜 盖恩斯', '办公室经理', '伦敦', '3814', '2008/12/19', '$90,560'], ['昆恩 弗林', '支持负责人', '爱丁堡', '9497', '2013/03/03', '$342,000'], ['查德 马歇尔', '区域总监', '三藩市', '6741', '2008/10/16', '$470,600'], ['海莉 肯尼迪', '高级市场设计师', '伦敦', '3597', '2012/12/18', '$313,500'], ['塔蒂安娜 菲茨帕特里克', '区域总监', '伦敦', '1965', '2010/03/17', '$385,750'], ['迈克尔 席尔瓦', '市场设计师', '伦敦', '1581', '2012/11/27', '$198,500'], ['保罗 伯德', '首席财务官 (CFO)', '纽约', '3059', '2010/06/09', '$725,000'], ['格洛丽亚 小', '系统管理员', '纽约', '1721', '2009/04/10', '$237,500'], ['布莱德利 格里尔', '软件工程师', '伦敦', '2558', '2012/10/13', '$132,000'], ['戴 里奥斯', '人事负责人', '爱丁堡', '2290', '2012/09/26', '$217,500'], ['珍妮特 卡德维尔', '开发负责人', '纽约', '1937', '2011/09/03', '$345,000'], ['尤里 贝里', '首席市场官 (CMO)', '纽约', '6154', '2009/06/25', '$675,000'], ['凯撒 万斯', '售前支持', '纽约', '8330', '2011/12/12', '$106,450'], ['多丽丝 怀尔德', '销售助理', '悉尼', '3023', '2010/09/20', '$85,600'], ['安杰莉卡 拉莫斯', '首席执行官 (CEO)', '伦敦', '5797', '2009/10/09', '$1,200,000'], ['加文 乔伊斯', '开发人员', '爱丁堡', '8822', '2010/12/22', '$92,575'], ['詹妮弗 张', '区域总监', '新加坡', '9239', '2010/11/14', '$357,650'], ['布伦登 瓦格纳', '软件工程师', '三藩市', '1314', '2011/06/07', '$206,850'], ['菲奥娜 格林', '首席运营官 (COO)', '三藩市', '2947', '2010/03/11', '$850,000'], ['Shou Itou', '区域市场', '东京', '8899', '2011/08/14', '$163,000'], ['米歇尔 豪斯', '集成专家', '悉尼', '2769', '2011/06/02', '$95,400'], ['苏姬 伯克斯', '开发人员', '伦敦', '6832', '2009/10/22', '$114,500'], ['普雷斯科特 巴特利特', '技术作者', '伦敦', '3606', '2011/05/07', '$145,000'], ['加文 科尔特斯', '团队负责人', '三藩市', '2860', '2008/10/26', '$235,500'], ['马尔特纳 麦克雷', '售后支持', '爱丁堡', '8240', '2011/03/09', '$324,050'], ['尤尼蒂 巴特勒', '市场设计师', '三藩市', '5384', '2009/12/09', '$85,675'], ]; $('#example').DataTable({ columns: [ { title: '姓名' }, { title: '职位' }, { title: '办公室' }, { title: '分机号' }, { title: '开始日期' }, { title: '工资' } ], data: dataSet });
var dataSet = [ ['老虎·尼克松', '系统架构师', '爱丁堡', '5421', '2011/04/25', '$320,800'], ['加勒特·温特斯', '会计师', '东京', '8422', '2011/07/25', '$170,750'], ['阿什顿·考克斯', '初级技术作者', '旧金山', '1562', '2009/01/12', '$86,000'], ['塞德里克·凯莉', '高级 JavaScript 开发人员', '爱丁堡', '6224', '2012/03/29', '$433,060'], ['卫理·佐藤', '会计师', '东京', '5407', '2008/11/28', '$162,700'], ['布里埃尔·威廉姆森', '集成专家', '纽约', '4804', '2012/12/02', '$372,000'], ['赫罗德·钱德勒', '销售助理', '旧金山', '9608', '2012/08/06', '$137,500'], ['罗娜·戴维森', '集成专家', '东京', '6200', '2010/10/14', '$327,900'], ['科琳·赫斯特', 'JavaScript 开发人员', '旧金山', '2360', '2009/09/15', '$205,500'], ['索尼娅·弗罗斯特', '软件工程师', '爱丁堡', '1667', '2008/12/13', '$103,600'], ['吉娜·盖恩斯', '办公室经理', '伦敦', '3814', '2008/12/19', '$90,560'], ['奎因·弗林恩', '支持主管', '爱丁堡', '9497', '2013/03/03', '$342,000'], ['夏德·马歇尔', '区域总监', '旧金山', '6741', '2008/10/16', '$470,600'], ['海莉·肯尼迪', '高级营销设计师', '伦敦', '3597', '2012/12/18', '$313,500'], ['塔季扬娜·菲茨帕特里克', '区域总监', '伦敦', '1965', '2010/03/17', '$385,750'], ['迈克尔·席尔瓦', '营销设计师', '伦敦', '1581', '2012/11/27', '$198,500'], ['保罗·伯德', '首席财务官 (CFO)', '纽约', '3059', '2010/06/09', '$725,000'], ['格洛丽亚·利特尔', '系统管理员', '纽约', '1721', '2009/04/10', '$237,500'], ['布拉德利·格里尔', '软件工程师', '伦敦', '2558', '2012/10/13', '$132,000'], ['戴·里奥斯', '人事主管', '爱丁堡', '2290', '2012/09/26', '$217,500'], ['珍妮特·考德威尔', '开发主管', '纽约', '1937', '2011/09/03', '$345,000'], ['尤里·贝里', '首席营销官 (CMO)', '纽约', '6154', '2009/06/25', '$675,000'], ['凯撒·万斯', '售前支持', '纽约', '8330', '2011/12/12', '$106,450'], ['多莉丝·怀尔德', '销售助理', '悉尼', '3023', '2010/09/20', '$85,600'], ['安吉丽卡·拉莫斯', '首席执行官 (CEO)', '伦敦', '5797', '2009/10/09', '$1,200,000'], ['加文·乔伊斯', '开发人员', '爱丁堡', '8822', '2010/12/22', '$92,575'], ['詹妮弗·张', '区域总监', '新加坡', '9239', '2010/11/14', '$357,650'], ['布伦丹·瓦格纳', '软件工程师', '旧金山', '1314', '2011/06/07', '$206,850'], ['菲奥娜·格林', '首席运营官 (COO)', '旧金山', '2947', '2010/03/11', '$850,000'], ['周守道', '区域营销', '东京', '8899', '2011/08/14', '$163,000'], ['米歇尔·豪斯', '集成专家', '悉尼', '2769', '2011/06/02', '$95,400'], ['苏姬·伯克斯', '开发人员', '伦敦', '6832', '2009/10/22', '$114,500'], ['普雷斯科特·巴特利特', '技术作者', '伦敦', '3606', '2011/05/07', '$145,000'], ['加文·科尔特斯', '团队主管', '旧金山', '2860', '2008/10/26', '$235,500'], ['玛丁娜·麦奎雷', '售后支持', '爱丁堡', '8240', '2011/03/09', '$324,050'], ['优尼蒂·巴特勒', '营销设计师', '旧金山', '5384', '2009/12/09', '$85,675'], ]; new DataTable('#example', { columns: [ { title: '名称' }, { title: '职位' }, { title: '办公室' }, { title: '分机号' }, { title: '入职日期' }, { title: '工资' } ], data: dataSet });
除上述代码外，还为本示例加载了以下 Javascript 库文件供使用
下面显示的 HTML 是原始 HTML 表格元素，它尚未经过 DataTables 增强
本示例除了从库文件中加载的内容（如下所示）外，还使用了少量的附加 CSS，以便正确显示表格。下面显示了使用的附加 CSS
为本示例加载了以下 CSS 库文件供使用，以提供表格的样式
此表格通过 Ajax 加载数据。已加载的最新数据显示如下。此数据将随着加载任何附加数据而自动更新。
下面显示了用于执行此表的服务器端处理的脚本。请注意，这仅仅是一个使用 PHP 的示例脚本文档。服务器端处理脚本可以使用任何语言编写，并使用DataTables 文档中所述的协议。