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' - 表格