Query DataTable 插件参数-列.pdf

《Query DataTable 插件参数-列.pdf》由会员分享，可在线阅读，更多相关《Query DataTable 插件参数-列.pdf（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Query DataTable 插件参数-列尽管 datatable 可以获得信息表的直接从 DOM,您可能希望给 datatable 特定指令为每个单独的列。这可以通过使用要么 aoColumnDefs 参数,或 aoColumns 和对象信息给每个列。这个aoColumnDefs 参数和 aoColumns 实现同样的目标,但不同在他们如何工作:aoColumnDefs:这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了aoColumnDefs datatable 1.7)。这提供了很大的灵活性在创建表,因为 aoColumnDef

2、s 数组可以是任意长度,目标是你特别想要的列。aTargets的属性是一个数组来目标众多列和每个元素在它可以:一个字符串-类的名称将会匹配在TH列0或一个正整数列索引从左开始算起一个负整数从右边列索引数字符串“所有”所有列(即指定一个默认值)aoColumns:如果指定,那么这个数组的长度必须等于列的数量在原始的 HTML 表。使用“null”,您希望仅使用缺省值和自动检测选项。两aoColumnDefs 参数和 aoColumns 可以一起使用,尽管aoColumnDefs 优先由于它的灵活性。如果两者都使用,aoColumns定义将最高优先级。同样,如果相同的列的目标是在aoColumnD

3、efs 多次,第一个元素的数组将最高优先级,最后一个最低的。aDataSort 允许一个列的排序采取多个列考虑当做一个排序。例如第一名/姓列意义做一个多列排序的两列。Default:默认值:null 值的列将自动进行索引 Type:类型:array数组 Code example:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:aDataSort:0,1,“aTargets”:0,“aDataSort”:1,0,“aTargets”:1,“aDataSort”:2,3,

4、4,“aTargets”:2););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:aDataSort:0,1,“aDataSort”:1,0,“aDataSort”:2,3,4,null,null););asSorting 你可以控制默认的排序方向,甚至改变行为的那种处理程序(即只允许升序排序等)使用这个参数。Default:默认值:asc,desc asc,desc Type:类型:array数组 Code example:代码示例:/UsingaoColumnDefs$(docume

5、nt).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);

6、);bSearchable 启用或禁用过滤数据在本专栏中。Default:默认值:trueType:类型:boolean 布尔 Codeexample:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:bSearchable:false,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:bSearchable:false,null,null

7、,null,null););bSortable 启用或禁用在这列排序。Default:默认值:trueType:类型:boolean 布尔Code example:代码示例:/Using aoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:bSortable:false,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:bSortable:false,null,n

8、ull,null,null););bUseRendered 当使用fnRender()为一个列,您可能希望使用原始的数据(在呈现之前)进行排序和过滤(默认是用于呈现的数据,用户可以看到)。这可能是有用的日期等。请注意,该选项已被弃用,将被删除的下一个版本的 datatable。请用 mRender/mData 而不是fnRender。Default:默认值:trueType:类型:boolean 布尔 Codeexample:代码示例:bVisible启用或禁用本专栏的显示。Default:默认值:trueType:类型:boolean 布尔 Code example:代码示例:/Using

9、aoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:bVisible:false,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:bVisible:false,null,null,null,null););fnCreatedCell 开发人员可定义的函数,就会调用一个 Cell 被创建(Ajax 源等)或处理输入(DOM 源)。这可以作为一种恭维,mRender

10、 允许您修改 DOM元素(例如添加背景颜色)当元素是可用的。Default:默认值:Type:类型:function 函数 Code example:代码示例:$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:aTargets:3,“fnCreatedCell”:function(nTd,sData,oData,iRow,iCol)if(sData=“1.7)$(nTd).css(color,blue););fnRender 自定义显示函数,将要求显示在本专栏的每一个 Cell。请注意,该选项已被弃用,将被删除的下

11、一个版本的datatable。请用mRender/mData而不是fnRender。Default:默认值:Type:类型:function函数Code example:代码示例:iDataSort 列索引(从 0 开始!),你想要执行一个在本专栏时被选中进行排序。这可以用于排序在隐藏列例如。Default:默认值:-1 使用自动计算列索引 Type:类型:intCode example:代码示例:/Using aoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:iDataSort:1,aTa

12、rgets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:iDataSort:1,null,null,null,null););mData 这个属性可以用来读取JSON 数据从任何数据源属性,包括深层嵌套对象/属性。可以给 mData 在许多不同的方面影响其行为:integer treated asan array index for the data source.This is the default thatDataTables uses(incrementally in

13、creased for each column).整数作为一个数组索引数据来源。这是默认的,datatable使用(增加为每一列)。string read an object property fromthe data source.Note that you can use Javascript dotted notationto read deep properties/arrays from the data source.字符串读一个对象属性从数据源。注意,您可以使用Javascript 的点表示法读深属性/数组从数据源。null thesDefaultContent option w

14、ill be used for the cell(null by default,so you will need to specify the default content you want typically an empty string).This can be useful on generatedcolumns such as edit/delete action columns.nullsDefaultContent 选项将被用于 cell(空在默认情况下,所以您将需要指定默认的内容你想要的通常是一个空字符串)。这可以用于生成的列(例如编辑/删除操作列。function the

15、 function givenwill be executed whenever DataTables needs to set or get thedata for a cell in the column.函数,函数将执行给定 datatable 时 要设置或获取数据为一个单元格的列。The function takes three parameters:这个函数接受三个参数:array|object The data source for the row数组|对象数据源的行string The type call data requested this will be setwhen s

16、etting data or filter,display,type,sort or undefinedwhen gathering data.string 调用数据请求类型这将是当设置数据的“set”或“过滤器”、“显示”、“类型”、“排序”或未定义在收集数据。Note that when undefined is given for the type DataTablesexpects to get the raw data for the object back注意,当未定义了类型 datatable 期望获得的原始数据对象返回*Data to set when the second p

17、arameter is set.*数据集时,第二个参数是“设置”。The return value from thefunction is not required when set is the type of call,butotherwise the return is what will be used for the data requested.从函数返回值不是必需的“set”时是类型的调用,但否则返回就是将用于所请求的数据。Note that prior to DataTables 1.9.2mData was called mDataProp.注意,之前被称为 mDataPro

18、p mData datatable 1.9.2。The name change reflects the flexibility of this property and isconsistent with the naming of mRender.这个名称的改变反映了该属性的灵活性和一致的命名mRender。If mDataProp is given,then it will still be used by DataTables,as it automatically maps the old name to the new if required.如果“mDataProp”是给定的,那

19、么它仍然会使用 datatable,因为它自动地图旧名称到新的如果需要。Default:默认值:null使用自动计算列索引 Type:类型:string 字符串 Code example:代码示例:/Read table data fromobjects$(document).ready(function()var oTable=$(#example).dataTable(“sAjaxSource”:“sources/deep.txt”,“aoColumns”:mData:engine,mData:browser,mData:platform.inner,mData:platform.deta

20、ils.0,mData:platform.details.1););/Using mData 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,“mData”:function(source,type,val)if(type=set)source.price

21、=val;/Store the computed dislay and filter valuesfor efficiencysource.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,type andundefined

22、 all just use the integerreturnsource.price;););mRender 这个属性是呈现伙伴 mData 和建议,当你想操纵显示数据(包括过滤、排序等等),但不改变底层表的数据,使用该属性。mData 实际上可以做所有的事情,这个属性可以和更多的,但这个参数很容易使用,因为没有“设置”选项。像mData 是可以给在许多不同的方法来影响它的行为,通过添加支持数组语法便于输出的数组(包括数组对象):integer treated as an arrayindex for the data source.整数作为一个数组索引数据来源。This is the de

23、fault that DataTables uses(incrementally increasedfor each column).这是默认的,datatable 使用(增加为每一列)。string read anobject property from the data source.字符串读一个对象属性从数据源。Note that you can use Javascript dotted notation to read deepproperties/arrays from the data source and also array bracketsto indicate that

24、the data reader should loop over the data sourcearray.注意,您可以使用 Javascript 的点表示法读深属性/数组从数据源和数组括号来表示数据的读者应该循环数据源数组。When characters are given between the array brackets,thesecharacters are used to join the data source array together.当角色会给出括号之间的数组,这些字符被用来连接数据源数组在一起。For example:“accounts,.name”would resu

25、lt in a commaseparated list with the name value from the accounts array ofobjects.例如:“账户,.name”将导致一个逗号分隔列表的“名字”值从“账户”对象数组。function the function given will beexecuted whenever DataTables needs to set or get the data for acell in the column.函数,函数将执行给定 datatable 时 要设置或获取数据为一个单元格的列。The function takes th

26、ree parameters:这个函数接受三个参数:array|object The data source for the row(based onmData)数组|对象数据源的行(基于 mData)string The typecall data requested this will befilter,display,typeor sort.string 调用数据请求类型这将是“过滤器”、“显示”、“类型”或“排序”。array|object The full data source for therow(not based on mData)数组|对象完整的数据源的行(不是基于 mDa

27、ta)The return value from the function is what will beused for the data requested.从函数返回值是将用于所请求的数据。Default:默认值:null 使用 mDataType:类型:string 字符串 Code example:代码示例:/Create a comma separated listfrom an array of objects$(document).ready(function()varoTable=$(#example).dataTable(“sAjaxSource”:“sources/dee

28、p.txt”,“aoColumns”:mData:engine,mData:browser,mData:platform,mRender:,.name”););/Use as a function tocreate a link from the data source$(document).ready(function()var oTable=$(#example).dataTable(“aoColumnDefs”:aTargets:0,“mData”:“download_link”,“mRender”:function(data,type,full)return<Ahref=”jav

29、ascript:changelink(http:/ 改变Cell 类型创建的列要么 TD Cell 或 TH Cell。这可能会有用,因为 TH Cell 有语义表中的身体,允许他们作为一个标题为一行(您可能希望添加范围=行”到 TH 元素)。Default:默认值:tdType:类型:string 字符串 Code example:代码示例:/Make the first column use TH cells$(document).ready(function()var oTable=$(#example).dataTable(“aoColumnDefs”:aTargets:0,“sCel

30、lType”:“th”););sClass 类给每个Cell在本专栏中。Default:默认值:Empty string空字符串Type:类型:string 字符串 Code example:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:sClass:my_class,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:sClass:my

31、_class,null,null,null,null););sContentPadding 当datatable 计算列宽来分配给每个列,它发现在每一列的最长的字符串,然后构造一个临时表和读取宽度从那。这里的问题是,“嗯”是更广泛的那么“iiii”,但后者是一个长字符串,因此计算出错(做它正确,然后把它变成一个 DOM 对象和测量,是可怕(!)慢)。因此作为一个“解决”我们提供该选项。它将附加价值的文本是发现是最长的字符串列即填充。一般来说,你不需要这个,它不是一般 DataT文档记录 Default:默认值:Empty string 空字符串 Type:类型:string 字符串 Code

32、example:代码示例:/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:null,null,null,sContentPadding:mmm););sDefaultContent 允许一个默认值是给出一个列的数据,然后使用一个空数据源时遇到(这可以因为 mData设置为null,或者因为数据源本身是 null)。Default:默认值:nullType:类型:string 字符串 Code example:代码示例:/Using aoColumnDefs$(document).ready

33、(function()$(#example).dataTable(“aoColumnDefs”:mData:null,sDefaultContent:Edit,aTargets:-1););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:null,null,null,mData:null,sDefaultContent:Edit););sName 这个参数是只用于 datatable 的服务器端处理。它可以是非常有用的,知道哪些列被显示在客户端,并映射这些数据库字段。当定义,名称也允许da

34、tatable 进行重新排序信息从服务器如果它回来了,一个意想不到的顺序(也就是说,如果你把你列在客户端,您的服务器端代码不也需要更新)。Default:默认值:Empty string 空字符串 Type:类型:string 字符串 Code example:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:sName:engine,aTargets:0,“sName”:“browser”“aTargets”,:1,“sName”:“platform”,“aTarge

35、ts”: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 定义一个数据源类型的排序,可以用于读取实时信息从表(更新内部缓存的版本)排序之前。这允许排序发生在用户可编辑元素如表单输入。Defaul

36、t:默认值:stdType:类型:string 字符串 Code example:代码示例:/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););/UsingaoColumn

37、s$(document).ready(function()$(#example).dataTable(“aoColumns”:null,null,sSortDataType:dom-text,sSortDataType:dom-text,sType:numeric,sSortDataType:dom-select,sSortDataType:dom-checkbox););sTitle这篇专栏文章的标题。Default:默认值:null 源自“TH”价值为本专栏在原始的 HTML 表。Type:类型:string 字符串 Codeexample:代码示例:/UsingaoColumnDefs$

38、(document).ready(function()$(#example).dataTable(“aoColumnDefs”:sTitle:Mycolumn title,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:sTitle:Mycolumn title,null,null,null,null););sType 类型允许您指定的数据如何将该列排序。Four types(string,numeric,date and html(which will str

39、ipHTML tags before sorting)are currently available.四种类型(字符串、数字、日期和html(它将带 html 标签分类之前)是目前可用的。注意,只有日期格式理解 Javascript 的日期()对象将被接受为类型日期。For example:“Mar 26,2008 5:03 PM”.例如:“2008 年 3 月 26 日,5:03 点”。May take the values:string,numeric,dateorhtml(by default).可能需要的值:“字符串“、“数字”、“日期”或“html”(默认情况下)。进一步的类型可以通

40、过插件添加。Default:默认值:null 自动从原始数据获取 Type:类型:string 字符串 Codeexample:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:sType:html,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:sType:html,null,null,null,null););sWidth 定义列的宽

41、度,这个参数可以采取任何 CSS 值(3 em,20 px 等等)。.DataTables applessmart widths to columns,还没有被给予一个特定的宽度通过这个接口确保表仍然是可读的。Default:默认值:null 自动 Type:类型:string 字符串 Code example:代码示例:/UsingaoColumnDefs$(document).ready(function()$(#example).dataTable(“aoColumnDefs”:sWidth:20%,aTargets:0););/UsingaoColumns$(document).ready(function()$(#example).dataTable(“aoColumns”:sWidth:20%,null,null,null,null););