Datatables中文网:http://dt.thxopen.com/index.html

尝试:

<table id="sp_table" class="display">
<tbody>
</tbody>
</table> //So you just make the Ajax call "manually" and then use the return to initialise DataTables.
$.ajax( {
"url": 'whatever.php',
"success": function ( json ) {
json.bDestroy = true;
$('#example').dataTable( json );
},
"dataType": "json"
} ); { "aaData": [
[ "2010-07-27 10:43:08", "..."], [ "2010-06-28 17:54:33", "..."],
[ "2010-06-28 16:09:06", "..."], [ "2010-06-09 19:15:00", "..."]
] , "aaSorting": [
[ 1, "desc" ]
], "aoColumns": [
{ "sTitle": "Title1" },
{ "sTitle": "Title2" }
] }
html

<table class="display" id="table"></table>
js $("#table").dataTable({
bJQueryUI:true,
aoColumns:[
{mDataProp:"foo",sTitle:"Foo Title"},
{mDataProp:"bar",sTitle:"Bar Title"}
],
fnServerData: function( sUrl, data, fnCallback){
$.get('data.php', function(res) {
fnCallback({ // process results to match table format
"sEcho":config.sEcho,
"iTotalRecords":res.data.total || res.data.count,
"iTotalDisplayRecords":res.data.count || res.data.total,
"aaData":res.data.list
})
});
}
})
Where data.php is {
data:{
total:200,
count:3,
list:[
{foo:"Foo 1",bar:"Bar 1"},
{foo:"Foo 2",bar:"Bar 2"},
{foo:"Foo 3",bar:"Bar 3"},
]
}
}
I add a new columns by recreating the whole datatable which is not recommended. But here's roughly how I do it:

1. Get column data via ajax

2. Push new column def:

aoColumnDefs.push({
"aTargets": [aoColumnDefs.length]
, "sTitle": sTitle
, "bSearchable": true
, "bVisible": true
, "bSortable": false
, "sClass": "recipe"
}); 3. Push new row data into aaData: $.each(aaData, function (i, rowData) {
rowData.push(newColData[rowData[1]] == undefined ? '' : newColData[rowData[1]]);
}); 4. reinitialize DataTable Removing a column: 1. Get the index into aaData and aoColumnDefs of the column to remove by the column index of the column to remove: var dataIndex = myConstants.numFixedColumns + index; 2. Remove array element at the index obtained in #1. $.each(aaData, function (i, data) {
data.splice(dataIndex, 1);
}); 3. Resequence aTargets: $.each(aoColumnDefs, function (i, column) {
column.aTargets = [i];
}); 4. reinitialize DataTable
I've got DataTables working fine on my page- the only problem I have is dynamically declaring the table headers. I'm using an existing JSON object instead of using DataTables built in AJAX functions (for various reasons). Here's what I've tried so far...

Normal (works):
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ {"sTitle": "Name"}, {"sTitle": "County"} ]
}); Give it the JSON (doesn't work):
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": results.COLUMNS
}); Give it a string var (doesn't work):
jQuery.each(results.COLUMNS, function(i, value){
column_names += '{"sTitle": "'+ value + '"}';
if (i+1 != results.COLUMNS.length) column_names += ", ";
}
); // This creates the string '{"sTitle": "NAME"}, {"sTitle": "COUNTY"}' - confirmed in FireBug.
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ column_names ]
}); Give it an object var (doesn't work):
function(results){
var columns = new Array();
jQuery.each(results.COLUMNS, function(i, value){
columns.push(column_name={stitle: value})
}
); //Creates the object, confirmed in FireBug
};
jQuery('#example').dataTable({
"sPaginationType": "full_numbers",
"aaData": results.DATA ,
"aoColumns": [ columns ]
}); Help? PS: The code examples were just typed up- there may be some stray commas or something. All the code (and variables) were tested in the browser.
fbasfbas August 2011
I can't see why approach #2 doesn't work unless your aoColumns are not defined correctly.
luketheobscureluketheobscure August 2011
Interesting. Here's the truncated JSON data: {"COLUMNS":["NAME","COUNTY"],"DATA":[[" John Doe","Fresno"],["Billy,"Fresno"],["Tom","Kern"],["King Smith","Kings"]]} Resulting table renders correctly, just without the column names.
fbasfbas August 2011
use the same format as aoColumns (an array of objects) {"COLUMNS":[{ sTitle: "NAME"}, { sTitle: "COUNTY"}],"DATA":[[" John Doe","Fresno"],["Billy,"Fresno"],["Tom","Kern"],["King Smith","Kings"]]} you can use any of the "init options - columns" values listed on http://www.datatables.net/ref or follow the examples at http://www.datatables.net/examples/
luketheobscureluketheobscure August 2011
Thanks so much for helping me out. In the end, I added this right before I declared my dataTable: var columns = [];
jQuery.each(results.COLUMNS, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
}); In case anyone else is looking, this takes the native way that ColdFusion returns JSON columns and puts it into what dataTables expects.

Jquery Datatables 动态列名的更多相关文章

  1. jquery.dataTables动态列--转

    转自 https://www.cnblogs.com/lyeo/p/4765514.html jquery.dataTables  版本1.10.7 直接上代码: 0.table <table ...

  2. jquery.dataTables动态列

    jquery.dataTables  版本1.10.7 直接上代码: 0.table <table id="popReportTable"> <thead> ...

  3. Jquery DataTables相关示例

    一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...

  4. JQuery Datatables(一)

    最近项目中用了Bootstrap的样式风格,控件用了JQuery Datatables,主要有几下几点目标: 实现BootStrap风格的table,使用Ajax获取数据,并有勾选项 可以实现全选,单 ...

  5. jQuery DataTables的简单实现

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 主要特点: 1.自动分页处理 2.即时表格数据过滤 3.数 ...

  6. JQuery DataTables学习

    1.Datatables简单介绍 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,根据的基础逐步增强,这将添加先进的互动控制.支持不论什么HTML表格. 主要特点: 自己主动 ...

  7. jQuery dataTables四种数据来源[转]

    2019独角兽企业重金招聘Python工程师标准>>> 四种数据来源 对于 dataTables 来说,支持四种表格数据来源. 最为基本的就是来源于网页,网页被浏览器解析为 DOM ...

  8. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  9. jquery Datatables 行数据删除、行上升、行下降功能演示

    Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...

随机推荐

  1. 获取元素样式 currentStyle 和 getcomputedStyle

    场景 你要获取某一元素的样式,可是没有获取到,返回的值为undefined,可是有时候又能成功? 为什么? 因为,xx.stly.xxx 可以获取的样式信息,是dom元素style属性里的样式,对于通 ...

  2. shell sort

    sort is awesome! 22 hpp_national:talk:recentAtUsers-64490 23 hpp_national:talk:site_online_users:178 ...

  3. 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model

    在ng-repeat中使用ng-model时会有许多问,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还 ...

  4. IE6下解决select层级高的问题

    div在IE6下无法遮盖select,原因是在IE6下,浏览器将select元素视为窗口级元素,这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的. 解决方法有三种 ...

  5. express的基本配置项

    express自动生成的app.js中有一段代码用app.set和app.use对express进行配置,但这些配置都是什么意思,以及都能做哪些配置并没有展开.这一节就专门来讲express的配置.上 ...

  6. CentOS6.6源码编译升级GCC至4.8.2

    升级前提 源码编译需要至少要有一个可用的gcc编译器. 可以用过yum自动安装或者手动下载rpm包安装. 通过yum可以看到至少需要下面这些安装包,所以可以到许多rpm package站点中搜索下载相 ...

  7. CentOS 6.4 安装思维到图工具TheBrain

    最近学习中需要使用思维导图的工具,但是使用的系统是CentOS,在网上找到了一个比较好的思维导图工具:TheBrain,安装完成后还是汉化版的不错啊,由于用的是linux系统,还没有找到合适的截图软件 ...

  8. 大话设计模式(带目录完整版).pdf等

    点击进入百度网盘 大话设计模式(带目录完整版).pdf等 保存至网盘下载二维码举报 赞(0)| 评论 | 分享至 分享时间:2014-04-01 11:02 | 467次浏览 130次下载 81次保存 ...

  9. DM8168 debug continue... ...

    1.boot   VFS: Unable to mount root fs via NFS, trying floppy.   VFS: Cannot open root device "n ...

  10. MySQL安装(以程序的方式启动)zip版

    电脑环境 win10 64位 企业版 1.解压zip文件到某路径下. 2.复制目录下的my-default.ini 改名字(my.ini) 3.打开my.ini [mysqld]下面加上charact ...