如何给datatable的aocolumns元素加样式

如何给datatable的aocolumns元素加样式,第1张

$(document).ready(function () {

$.get("page/cpu/usage.json", function (data) {

if (data.msg != "success") {

return

}

var temp = new Array()

for (var i = 0i <data.lengthi++)

temp.push({ "sTitle": data.title[i] })

$("#cpu").dataTable({

aaData: data.data,

aoColumns: temp,

bAutoWidth: false

}).fadeIn()

}, "json")

})

aoColumns 参数用来定义表格的列,这是一个数组,其中的每一个对象用来定义一列。

对于每一个列对象:

sTitle 定义列的标题

sClass 定义列的样式

fnRender 函数用来渲染列,这个函数将会传递一个参数对象,这个参数对象的 iDataColumn 属性表示当前的列索引,aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

当然了,对于表示行的数组来说,长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话,就会得到一个警告。

第三种数据来源是 AJAX,也就是说可以向服务器发一个请求来获得数据。

在初始化参数对象中,通过 sAjaxSource 的属性传递请求的地址,bProcessing 表示是否需要显示一个工作中的提示。

在 JSON 方式返回的数据中,需要一个名为 aaData 的属性来提供实际的数据。

$(document).ready(function() {

$('#example').dataTable( {

"bProcessing": true,

"sAjaxSource": '../examples_support/json_source.txt'

} )

} )

其中 json_source.txt 就是 JSON 数据,其中定义了一个名为 aaData 的属性。这个文件可以在下载的压缩包中找到,在 examples\examples_support 文件夹中。

最后一种数据来源是服务器,对于大量的数据来说,你可能希望在服务器端完成所有的 *** 作,分页、排序、过滤等等。dataTable 可以通过服务器完成这些功能,甚至其他的服务器,像 Google Gears 或者 Adobe Air,这样的话,dataTables 就是一个显示数据和提供 *** 作事件的前端模块。

$(document).ready(function() {

$('#example').dataTable( {

"bProcessing": true,

"bServerSide": true,

"sAjaxSource": "../examples_support/server_processing.php"

} )

} )

对于服务器来说,可以通过请求参数来获得当前的 *** 作信息。

$(window).load(function () {

$('#managertable').dataTable({

"bServerSide": true,

"bAutoWidth": true,

"bStateSave": false, //保存状态到cookie ******很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性设置为true就可避免了

"bPaginate": true, // 是否使用分页

"bProcessing": true, //是否显示正在处理的提示

"bLengthChange": false, //是否启用设置每页显示记录数

"iDisplayLength": 20, //默认每页显示的记录数

"bFilter": true, //是否使用搜索

"bJQueryUI": true, //页面风格使用jQuery.

// "sScrollY": 200,//竖向滚动条 tbody区域的高度

"sScrollX": "100%", //横向滚动条

"sScrollXInner": "100%",

"bScrollCollapse": true,

"aoColumns": [{ "sTitle": "Id" },

{ "sTitle": "Name" },

{ "sTitle": "Permission" },

{ "sTitle": "Remarks"}],

"sPaginationType": "full_numbers", //分页样式

"bAutoWidth": true, //列的宽度会根据table的宽度自适应

"bSort": false, //是否使用排序

"aaSorting": [[0, "desc"]],

"sAjaxSource": "/action/admin/index.ashx?paraname=admingroupmanager&sub_detail_id=" + $.cookies.get('sub_detail_id')

})

})

下面是ajaxsource响应:

[{"Id":1,"Name":"管理员组","Permission":"100,110,120,130,200,210,220,300,310,320,330,400,410,420,430,500,510,520,600,610,620,630,631,632,633,634,640,700,710,720,730,740,800,810,820,830","Remarks":""}]

绑定不上:var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json )//这里的json是有响应的数据

for ( var i=0, iLen=aData.length i<iLen i++ )

这里aData获取到的是:undefined; 这里解决了,

现在出现这个问题:

Showing 1 to NaN of NaN entries (filtered from NaN total entries)

DataTables warning (table id = 'managertable'): Requested unknown parameter '0' from the data source for row 0


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11248588.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存