DataTable使用详解，kettle详细使用教程
function initTable()
{
return $(’#example’).dataTable( {
“sScrollY”: “200px”,
“bPaginate”: false,
“bRetrieve”: true
});
}
function tableActions()
{
var oTable = initTable();
// perform API operations with oTable
}
/*
bScrollAutoCss
默认为true
指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bScrollAutoCss”: false,
“sScrollY”: “200px”
});
});
/*
bScrollCollapse
默认为false
当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利）
不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面
当结果集的高度比给定的高度小时该参数会使表格高度自适应
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sScrollY”: “200”,
“bScrollCollapse”: true
});
});
/*
bSortCellsTop
默认为false
是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bSortCellsTop”: true
});
});
/*
iCookieDuration
默认为7200秒（2个小时）
设置用来存储会话信息的cookie的持续时间，单位是秒
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“iCookieDuration”: 606024 // 1 day
});
})
/*
iDeferLoading
默认为null
当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等）
因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据
信息元素和分页会被正确保留
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bServerSide”: true,
“sAjaxSource”: “scripts/server_processing.php”,
“iDeferLoading”: 57
});
});
/*
iDisplayLength
默认为10
单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bServerSide”: true,
“sAjaxSource”: “scripts/server_processing.php”,
“iDeferLoading”: 57
});
});
/*
iDisplayStart
默认为0
当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始
需要把该参数指定为20
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“iDisplayStart”: 20
});
})
/*
iScrollLoadGap
默认为100
滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界
以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bScrollInfinite”: true,
“bScrollCollapse”: true,
“sScrollY”: “200px”,
“iScrollLoadGap”: 50
});
});
/*
iTabIndex
默认为0
默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤）
允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换
如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“iTabIndex”: 1
});
});
/*
oSearch
无默认值
该参数允许你在初始化的时候使用已经定义的全局过滤状态，sSearch对象必须被定义，但是所有的其它选项都是可选的
当bRegex为true的时候，搜索字符串会被当作正则表达式，当为false（默认）的时候，会被直接当作一个字符串
当bSmart为true的时候，DataTable会使用使用灵活过滤策略（匹配任何可能的数据），为false的时候不会这样做
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“oSearch”: {“sSearch”: “Initial search”}
});
})
/*
sAjaxDataProp
默认为aaData
当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源
该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源
*/
// Get data from { “data”: […] }
$(document).ready(function(){
var oTable = $(’#example’).dataTable( {
“sAjaxSource”: “sources/data.txt”,
“sAjaxDataProp”: “data”
});
});
// Get data from { “data”: { “inner”: […] } }
$(document).ready(function(){
var oTable = $(’#example’).dataTable( {
“sAjaxSource”: “sources/data.txt”,
“sAjaxDataProp”: “data.inner”
});
});
/*
sAjaxSource
默认为null
该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData）
可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sAjaxSource”: “http://www.sprymedia.co.uk/dataTables/json.php”
});
})
/*
sCookiePrefix
默认为SpryMedia_DataTables_
该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sCookiePrefix”: “my_datatable_”,
});
});
/*
sDom
默认值为lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部）
DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用
可供使用的选项
'l' - 长度改变'f' - 过滤输入't' - 表格'i' - 信息'p' - 分页'r' - 处理可供使用的常量
'H' - jQueryUI theme "header" classes('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')需要的语法
'<' 和 '>' - div元素'<"class" and '>' - 带有class属性的div元素'<"#id" and '>' - 带有id属性的div元素例子
'<"wrapper"flipt>''<lf<t>ip>'
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sDom”: ‘<"top"i>rt<"bottom"flp><“clear”&lgt;’
});
});
/*
sPaginationType
默认为two_button
DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式
可以通过API增加策略
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sPaginationType”: “full_numbers”
});
})
/*
sScrollXInner
默认为空字符串，即：无效
当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长
比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动
该该属性可以是css设置，或者一个数字（作为像素量度来使用）
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”
});
});
/*
sServerMethod
默认值为GET
设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式
*/
$(document).ready(function(){
$(’#example’).dataTable({
“bServerSide”: true,
“sAjaxSource”: “scripts/post.php”,
“sServerMethod”: “POST”
});
});
/------------------------------------------------Callback------------------------------------------------/
/*
fnCookieCallback
无默认值
当DataTable的状态保留可用时，自定义被保存的cookie和参数。只要cookie被修改就会调用此方法
该方法需要返回一个格式良好的cookie字符串，注意数据对象是以Javascript对象的形式传递进来的，必须转换成字符串，例如JSON格式
*/
$(document).ready(function (){
$(’#example’).dataTable({
“fnCookieCallback”: function (sName, oData, sExpires, sPath) {
// Customise oData or sName or whatever else here
return sName + “=”+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
}
});
});
/*
fnCreatedRow
无默认值
当一个新的TR元素（并且所有TD子元素被插入）被创建或者被作为一个DOM资源被注册时调用该函数
允许操作该TR元素
*/
$(document).ready(function(){
$(’#example’).dataTable({
“fnCreatedRow”: function( nRow, aData, iDataIndex ){
// Bold the grade for all ‘A’ grade browsers
if ( aData[4] == “A” )
{
$(‘td:eq(4)’, nRow).html( ‘A’ );
}
}
});
});
/*
fnDrawCallback
无默认值
每当draw事件发生时调用该函数，允许你动态编辑新建的dom对象的任何属性
*/
$(document).ready( function(){
$(’#example’).dataTable({
“fnDrawCallback”: function(){
alert( ‘DataTables has redrawn the table’ );
}
});
});
/*
fnFooterCallback
无默认值
与fnHeaderCallback()完全相同，只是该函数允许你在每一个draw时间发生时修改页脚
*/
$(document).ready( function(){
$(’#example’).dataTable({
“fnDrawCallback”: function() {
alert( ‘DataTables has redrawn the table’ );
}
});
});
/*
fnFormatNumber
无默认值
当渲染表格信息（例如：显示57条记录中的1-10条）中大的数字时
为了方便用户，DataTable会使用逗号分割每千单位（例如1000000会被渲染为1,000,000）
该函数会重写DataTable默认使用的策略
*/
$(document).ready(function(){
$(’#example’).dataTable({
“fnFormatNumber”: function ( iIn ) {
if ( iIn < 1000 ) {
return iIn;
} else {
var
s=(iIn+""),
a=s.split(""), out="",
iLen=s.length;
for ( var i=0 ; i<iLen ; i++ ) {
if ( i%3 === 0 && i !== 0 ) {
out = “’”+out;
}
out = a[iLen-i-1]+out;
}
}
return out;
};
});
});
/*
fnHeaderCallback
无默认值
每当draw事件发生时调用该函数，允许你动态编辑表头行，可以用来计算和展示关于表格的有用的信息
*/
$(document).ready(function(){
$(’#example’).dataTable({
“fnFormatNumber”: function ( iIn ) {
if ( iIn < 1000 ) {
return iIn;
} else {
var
s=(iIn+""),
a=s.split(""), out="",
iLen=s.length;
for ( var i=0 ; i<iLen ; i++ ) {
if ( i%3 === 0 && i !== 0 ) {
out = “’”+out;
}
out = a[iLen-i-1]+out;
}
}
return out;
};
});
});
/*
fnInfoCallback
无默认值
信息元素可以用来传输表格当前状态的信息，尽管DataTable提供的国际化的选项在处理大多数自定义情况时已经相当方便了
或许你有时仍然希望自定义深层的字符串,该函数会满足你的需要
*/
$(’#example’).dataTable( {
“fnInfoCallback”: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
return iStart +" to "+ iEnd;
}
});
/*
fnInitComplete
无默认值
当表格被初始化后调用该函数，通常DataTable会被持续初始化，并不需要该函数
可是，当使用异步的XmlHttpRequest从外部获得语言信息时，初始化并不是持续的
*/
$(document).ready( function(){
$(’#example’).dataTable({
“fnInitComplete”: function(oSettings, json) {
alert( ‘DataTables has finished its initialisation.’ );
}
});
})
/*
fnPreDrawCallback
无默认值
在每一个表格draw事件发生前调用该函数，通过返回false来取消draw事件
其它任何的返回值，包括undefined都会导致draw事件的发生
*/
$(document).ready( function(){
$(’#example’).dataTable({
“fnPreDrawCallback”: function( oSettings ) {
if ( $(’#test’).val() == 1 ) {
return false;
}
}
});
});
/*
fnRowCallback
无默认值
你可以通过该函数在每一个表格绘制事件发生之后，渲染到屏幕上之前，向表格里的每一行传递’处理过程’
该函数可以用来设置行的class名字等
*/
$(document).ready(function(){
$(’#example’).dataTable({
“fnRowCallback”: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all ‘A’ grade browsers
if ( aData[4] == “A” )
{
$(‘td:eq(4)’, nRow).html( ‘A’ );
}
}
});
});
/*
fnServerData
无默认值
你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用
例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据
*/
// POST data to server
$(document).ready(function(){
$(’#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sAjaxSource”: “xhr.php”,
“fnServerData”: function ( sSource, aoData, fnCallback ) {
$.ajax( {
“dataType”: ‘json’,
“type”: “POST”,
“url”: sSource,
“data”: aoData,
“success”: fnCallback
} );
}
});
});
/*
fnServerParams
无默认值
用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单
传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合
*/
$(document).ready(function(){
$(’#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sAjaxSource”: “scripts/server_processing.php”,
“fnServerParams”: function ( aoData ) {
aoData.push( { “name”: “more_data”, “value”: “my_value” } );
}
});
});
/*
fnStateLoad
无默认值
加载表格状态，使用该函数你可以定义状态信息加载的位置和方式，默认情况下DataTable会从cookie中加载
不过你或许希望使用本地存储（HTML5支持），或者服务端数据库
*/
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateSave”: function (oSettings, oData) {
var o;
// Send an Ajax request to the server to get the data. Note that
// this is a synchronous request.
$.ajax( {
“url”: “/state_load”,
“async”: false,
“dataType”: “json”,
“success”: function (json) {
o = json;
}
} );
return o;
}
});
});
/*
fnStateLoadParams
无默认值
该回调可以用来在加载状态信息之前编辑状态信息
函数在表格从存储的数据加载状态信息时调用，在表格<当前使用的设置对象>被<从保存信息中加载的设置对象>修改以前调用
注意作为插件开发者，你应该使用’stateLoadParams’事件去加载plug-in的参数
*/
// Remove a saved filter, so filtering is never loaded
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateLoadParams”: function (oSettings, oData) {
oData.oFilter.sSearch = “”;
});
});
// Disallow state loading by returning false
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateLoadParams”: function (oSettings, oData) {
return false;
});
});
/*
fnStateLoaded
无默认值
在表格状态被状态存储方法读取和DataTable设置对象被修改时调用，作为被状态信息被加载的结果
*/
// Show an alert with the filtering value that was saved
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateLoaded”: function (oSettings, oData) {
alert( 'Saved filter was: '+oData.oFilter.sSearch );
});
});
/*
fnStateSave
无默认值
保存表格状态，使用该函数你可以定义状态信息保存的位置和方式，默认情况下DataTable会保存在cookie中
不过你或许希望使用本地存储（HTML5支持），或者服务端数据库
*/
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateSave”: function (oSettings, oData) {
// Send an Ajax request to the server with the state object
$.ajax( {
“url”: “/state_save”,
“data”: oData,
“dataType”: “json”,
“method”: “POST”
“success”: function () {}
});
}
});
});
/*
fnStateSaveParams
无默认值
该回调允许你编辑被保存的状态信息，在表格改变了状态信息需要保存的时候调用
可以使用该回调在保存状态信息的对象被保存以前对其进行修改，包括添加或者其它状态属性或者修改
*/
// Remove a saved filter, so filtering is never saved
$(document).ready(function(){
$(’#example’).dataTable({
“bStateSave”: true,
“fnStateLoadParams”: function (oSettings, oData) {
oData.oFilter.sSearch = “”;
});
});
/------------------------------------------------Columns------------------------------------------------/
/*
aDataSort
默认为null,自动使用列序号作为默认
在排序一列的时候同时将其它几列也排序，例如名和姓作为多列排序
*/
// Using aoColumnDefs
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumnDefs”: [
{ “aDataSort”: [ 0, 1 ], “aTargets”: [ 0 ] },
{ “aDataSort”: [ 1, 0 ], “aTargets”: [ 1 ] },
{ “aDataSort”: [ 2, 3, 4 ], “aTargets”: [ 2 ] }
]
});
});
// Using aoColumns
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumns”: [
{ “aDataSort”: [ 0, 1 ] },
{ “aDataSort”: [ 1, 0 ] },
{ “aDataSort”: [ 2, 3, 4 ] },
null,
null
]
});
});
/*
asSorting
默认为[ ‘asc’, ‘desc’ ]
你可以通过该参数控制默认排序的方向，甚至改变排序处理器的行为（例如：只允许升序排序）
*/
// Using aoColumnDefs
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumnDefs”: [
{ “asSorting”: [ “asc” ], “aTargets”: [ 1 ] },
{ “asSorting”: [ “desc”, “asc”, “asc” ], “aTargets”: [ 2 ] },
{ “asSorting”: [ “desc” ], “aTargets”: [ 3 ] }
]
});
});
// Using aoColumns
$(document).ready(function(){
$(’#example’).dataTable( {
“aoColumns”: [
null,
{ “asSorting”: [ “asc” ] },
{ “asSorting”: [ “desc”, “asc”, “asc” ] },
{ “asSorting”: [ “desc” ] },
null
]
});
});
/*
bSearchable
默认为true
是否在列上应用过滤
*/
// Using aoColumnDefs
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumnDefs”: [
{ “bSearchable”: false, “aTargets”: [ 0 ] }
]} );
});
// Using aoColumns
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumns”: [
{ “bSearchable”: false },
null,
null,
null,
null
] });
});
/*
bSortable
默认为true
是否在某一列上开启排序
*/
// Using aoColumnDefs
$(document).ready(function(){
$(’#example’).dataTable({
“aoColumnDefs”: [
{ “bSortable”: false, “aTargets”: [ 0 ] }
] });
});
// Using aoColumns
$(document).ready(function(){
$(’#example’).dataTable( {
“aoColumns”: [
{ “bSortable”: false },
null,
null,
null,
null
] });
});
/*
bUseRendered
默认为true
当对一列使用使用fnRender时，你或许希望使用原始的数据（渲染以前）去排序或者过滤（默认是使用用户看到的渲染过的数据）
或许对日期类型有些用处，注意，现在建议使用mDataProp作为函数并且使用该函数提供的type参数，来允许不同的数据被用来排序，过滤，展现和类型检测
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{
“fnRender”: function ( oObj ) {
return oObj.aData[0] +’ '+ oObj.aData[3];
},
“bUseRendered”: false,
“aTargets”: [ 0 ]
}
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{
“fnRender”: function ( oObj ) {
return oObj.aData[0] +’ '+ oObj.aData[3];
},
“bUseRendered”: false
},
null,
null,
null,
null
]
} );
} );
/*
bVisible
默认值为true
是否展示某一列
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{ “bVisible”: false, “aTargets”: [ 0 ] }
] } );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{ “bVisible”: false },
null,
null,
null,
null
] } );
} );
/*
fnCreatedCell
无默认值
每当新的单元格被建立（Ajax源等）或者处理输入（DOM源）时，开发者可定义的函数会被调用
该属性用作fnRender的补充来允许你修改在fnRender函数调用之后新建的DOM元素（例如增加背景颜色）
nTd:TD元素, sData：单元格的值, oData：单元格所在的行值, iRow：当前页面显示行的索引, iCol：当前所在列的索引
*/
$(docu
《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》
【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享
ment).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [ {
“aTargets”: [3],
“fnCreatedCell”: function (nTd, sData, oData, iRow, iCol) {
if ( sData == “1.7” ) {
$(nTd).css(‘color’, ‘blue’)
}
}
} ]
});
} );
/*
fnRender
无默认值
自定义列中每个单元格被展示的时候调用的展示函数
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{
“fnRender”: function ( o, val ) {
return o.aData[0] +’ '+ o.aData[3];
},
“aTargets”: [ 0 ]
}
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{ “fnRender”: function ( o, val ) {
return o.aData[0] +’ '+ o.aData[3];
} },
null,
null,
null,
null
]
} );
} );
/*
iDataSort
默认值为-1，使用自动计算的列标
当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{ “iDataSort”: 1, “aTargets”: [ 0 ] }
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{ “iDataSort”: 1 },
null,
null,
null,
null
]
} );
} );
/*
mDataProp
默认为null,使用自动计算的列标
该属性可以从任何JSON格式数据源读取属性，包括深层网状的对象和属性，
有几种不同的传递方式可以影响mDataProp的行为
整型：被当作数据源的数组下表，是DataTable使用的默认行为（每列递增）
字符串类型：被当作从数据源获取的对象的属性名，注意你可以使用Javascript点号访问符去访问深层次的属性或数组
null：sDafaultContent选项会被使用到单元格上，（默认是空字符串，当生成可编辑列、可删除列的时候可以使用该属性）
函数：当表格获取或者设置单元格时被调用的函数，函数有三个参数
{array|object}:该行的数据源{string}:调用数据请求的类型，设置数据时是'set'，收集数据时是'filter','display','type','sort'{*}:当第二个参数是set的时候，要被设置的数据当类型是'set'的时候，该函数不需要返回一个值，除此之外，返回值是可以用来请求数据的
*/
// Read table data from objects
$(document).ready(function() {
var oTable = $(’#example’).dataTable( {
“sAjaxSource”: “sources/deep.txt”,
“aoColumns”: [
{ “mDataProp”: “engine” },
{ “mDataProp”: “browser” },
{ “mDataProp”: “platform.inner” },
{ “mDataProp”: “platform.details.0” },
{ “mDataProp”: “platform.details.1” }
]
} );
} );
// Using mDataProp as a function to provide different information for
// sorting, filtering and display. In this case, currency (price)
$(document).ready(function() {
var oTable = $(’#example’).dataTable( {
“aoColumnDefs”: [
{
“aTargets”: [ 0 ],
“mDataProp”: function ( source, type, val ) {
if (type === ‘set’) {
source.price = val;
// Store the computed dislay and filter values for efficiency
source.price_display = val=="" ? “” : “$”+numberFormat(val);
source.price_filter = val=="" ? “” : “$”+numberFormat(val)+" "+val;
return;
}
else if (type === ‘display’) {
return source.price_display;
}
else if (type === ‘filter’) {
return source.price_filter;
}
// ‘sort’ and ‘type’ both just use the integer
return source.price;
}
]
} );
} );
/*
sClass
默认值为空字符串
该列的每一个单元格被赋予的class
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{ “sClass”: “my_class”, “aTargets”: [ 0 ] }
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{ “sClass”: “my_class” },
null,
null,
null,
null
]
} );
} );
/*
sContentPadding
默认值为空字符串
当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表
从临时表中读取宽度，这样带来的问题是’mmm’会比’iiii’的长度长很多，但是后者的长度要大
这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法
它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中
*/
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
null,
null,
null,
{
“sContentPadding”: “mmm”
}
]
} );
} );
/*
sDefaultContent
默认为空字符串
允许给列值一个默认值，只要发现null值就会显示默认值
可以由mDataProp设置为null或者数据源是null引起
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{
“mDataProp”: null,
“sDefaultContent”: “Edit”,
“aTargets”: [ -1 ]
}
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
null,
null,
null,
{
“mDataProp”: null,
“sDefaultContent”: “Edit”
}
]
} );
} );
/*
sName
默认值为空字符串
该参数只有使用在服务器端处理的时候调用，在了解客户端展示了哪些列的时候十分有用
然后与数据库字段建立映射，当被定义时，如果服务器端返回的信息的顺序不是期望的顺序，也可以使用名字去区分
使用这种方式的好处是：用户在客户端交换了列，你的服务器端代码不用更新
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{ “sName”: “engine”, “aTargets”: [ 0 ] },
{ “sName”: “browser”, “aTargets”: [ 1 ] },
{ “sName”: “platform”, “aTargets”: [ 2 ] },
{ “sName”: “version”, “aTargets”: [ 3 ] },
{ “sName”: “grade”, “aTargets”: [ 4 ] }
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumns”: [
{ “sName”: “engine” },
{ “sName”: “browser” },
{ “sName”: “platform” },
{ “sName”: “version” },
{ “sName”: “grade” }
]
} );
} );
/*
sSortDataType
默认值为std
为排序操作定义可以用来在排序前读取实时表格信息（更新内部缓存版本）的数据源的类型
允许排序事件发生在用户可编辑的元素上，例如输入框
*/
// Using aoColumnDefs
$(document).ready(function() {
$(’#example’).dataTable( {
“aoColumnDefs”: [
{ “sSortDataType”: “dom-text”, “aTargets”: [ 2, 3 ] },
{ “sType”: “numeric”, “aTargets”: [ 3 ] },
{ “sSortDataType”: “dom-select”, “aTargets”: [ 4 ] },
{ “sSortDataType”: “dom-checkbox”, “aTargets”: [ 5 ] }
DataTable使用详解，kettle详细使用教程相关推荐
- MySQL安装教程包含所有平台（图解），MySQL下载步骤详解（带安装教程）
现在作为服务器的操作系统一般有两种,分别是 Windows Server 和 Linux,这里我们分别介绍在 Windows 下和 Linux 下安装 MySQL 的具体操作步骤. MySQL安装教程 ...
- mysql5 workbench教程_详解MySQL Workbench使用教程
MySQL Workbench 是一款专为 MySQL 设计的集成化桌面软件,也是下一代的可视化数据库设计.管理的工具,它同时有开源和商业化两个版本.该软件支持 Windows 和 Linux 系统, ...
- NLP：Transformer的架构详解之详细攻略(持续更新)
NLP:Transformer的架构详解之详细攻略(持续更新) 目录 Transformer的架构详解 1. Encoder 1.1.Positional Encoding-数据预处理的部分 1.2. ...
- NLP：Transformer的简介(优缺点)、架构详解之详细攻略
NLP:Transformer的简介(优缺点).架构详解之详细攻略 目录 Transformer的简介(优缺点).架构详解之详细攻略 1.Transformer的简介 (1).Transforme的四 ...
- Python之pandas：pandas中to_csv()、read_csv()函数的index、index_col(不将索引列写入)参数详解之详细攻略
Python之pandas:pandas中to_csv().read_csv()函数的index.index_col(不将索引列写入)参数详解之详细攻略 目录 pandas中to_csv().read ...
- Python之pandas：pandas中缺失值与空值处理的简介及常用函数(drop()、dropna()、isna()、isnull()、fillna())函数详解之详细攻略
Python之pandas:pandas中缺失值与空值处理的简介及常用函数(drop().dropna().isna().isnull().fillna())函数详解之详细攻略 目录 pandas中缺 ...
- android Json解析详解（详细代码）
android Json解析详解(详细代码) JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当 ...
- Computer：字符编码(ASCII编码/GBK编码/BASE64编码/UTF-8编码)的简介、案例应用(python中的编码格式及常见编码问题详解)之详细攻略
Computer:字符编码(ASCII编码/GBK编码/BASE64编码/UTF-8编码)的简介.案例应用(python中的编码格式及常见编码问题详解)之详细攻略 目录 符串编码(ASCII编码/GB ...
- DataTable小详解
DataTable小详解 DataTable小详解 基础操作 筛选DataTable数据 DataTable.Select()小详解 排序 分组 分页 去重 穿插一下LinqDynamic 利用反射 ...
- ML之shap：分析基于shap库生成的力图、鸟瞰图、散点图等可视化图的坐标与内容详解之详细攻略
ML之shap:分析基于shap库生成的力图.鸟瞰图.散点图等可视化图的坐标与内容详解之详细攻略 目录 一.力图可视化 1.单个样本力图可视化
最新文章
- Windows下修改Git Bash 默认路径
- 职业经理十项管理技能必修课
- 福建工程学院寒假作业G题
- 郑杰 | 如何拿回我们自己的医疗数据？
- flask ajax json html,后端后，渲染模板通过Flask中的Ajax从前端接收JSON
- 工控软件图形界面-控件实现（圆形仪表控件三）(zz)
- 汇编调用C函数--利用堆栈传递参数
- 资金流学习 - 关注点
- 190719每日一句
- 上周内外盘行情回顾及交易情况2022.4.4
- 星星之火OIer：对拍
- 如何在电脑浏览器查看微信文章
- 职场干货——职场多年，一些对付小人的经验之谈
- 组件封装 - steps组件
- backtracking及其应用
- 关于旋转中心的计算以及运用
- HTML是一种标识语音,HTML实现网页端语音输入（语音识别，语义理解，olami）
- ff14优雷卡补正什么意思_如何评价FF14 禁地优雷卡？
- uboot 修改启动logo
- 干货满满！财务报表之FineReport年初财务编制预算
热门文章
- 华为手机活了？今年出货量目标提升到4000万！底气从何而来？
- Conda创建新环境
- mactype支持qq浏览器
- colspan(colspan=2)
- 八一学院期末考试答案专科计算机,(2018春电大)国家开放大学学习指南形考作业参考答案...
- android 游戏开发之物理小球的应用
- Cloudera Manager安装CDH6教程-（二）搭建Cloudera和CDH6
- linux默认网关0.0.0.0,0.0.0.0作为网关是什么意思？
- 智能信息处理复习1——布尔查询
- k8s Cannot contact maven-25gxr: java.lang.InterruptedException