jquery datatables api（2）

二： 列属性

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array to target one of many columns and each element in it can be:

aoColumnDefs:这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了
aoColumnDefs datatable
1.7)。这提供了很大的灵活性在创建表,因为aoColumnDefs数组可以是任意长度,目标是你特别想要的列。aTargets的属性是一个数组来
目标众多列和每个元素在它可以:

  • a string - class
    name will be matched on the TH for the column
  • 0 or a positive
    integer - column index counting from the left
  • a negative integer
    - column index counting from the right
  • the string "_all" -
    all columns (i.e. assign a default)

aoColumns: If specified, then the length of this
array must be
equal to the number of columns in the original HTML table. Use
‘null‘ where you wish to use only the default values and
automatically detected options.

aoColumnDefs参数和aoColumns可以一起使用,尽管aoColumnDefs优先aoColumns的灵活性。
如果两者都使用,aoColumns定义将最高优先级。同样,如果相同的列的目标是在aoColumnDefs多次,第一个元素的数组将最高优先级,最后
一个最低的。

aDataSort：定义一个列或多个列自定义排序

Default: null Takes the value of the column index
automatically
Type: array
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ]
    },
  6. { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ]
    },
  7. { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ]
    }
  8. ]
  9. } );
  10. } );
  11. // Using aoColumns
  12. $(document).ready( function() {
  13. $(‘#example‘).dataTable( {
  14. "aoColumns": [
  15. { "aDataSort": [ 0, 1 ] },
  16. { "aDataSort": [ 1, 0 ] },
  17. { "aDataSort": [ 2, 3, 4 ] },
  18. null,
  19. null
  20. ]
  21. } );
  22. } );

复制代码

asSorting：控制列的升序或降序到自定义列

Default: [ ‘asc‘, ‘desc‘ ]
Type: array
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "asSorting": [ "asc" ], "aTargets": [ 1 ]
    },
  6. { "asSorting": [ "desc", "asc", "asc" ],
    "aTargets": [ 2 ] },
  7. { "asSorting": [ "desc" ], "aTargets": [ 3 ]
    }
  8. ]
  9. } );
  10. } );
  11. // Using aoColumns
  12. $(document).ready( function() {
  13. $(‘#example‘).dataTable( {
  14. "aoColumns": [
  15. null,
  16. { "asSorting": [ "asc" ] },
  17. { "asSorting": [ "desc", "asc", "asc" ] },
  18. { "asSorting": [ "desc" ] },
  19. null
  20. ]
  21. } );
  22. } );

复制代码
bSearchable：设置列是否能被快速检索框搜索到

Default: true
Type: boolean
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "bSearchable": false, "aTargets": [ 0 ] }
  6. ] } );
  7. } );
  8. // Using aoColumns
  9. $(document).ready( function() {
  10. $(‘#example‘).dataTable( {
  11. "aoColumns": [
  12. { "bSearchable": false },
  13. null,
  14. null,
  15. null,
  16. null
  17. ] } );
  18. } );

复制代码

bSortable：启用或禁用列排序。

Default: true
Type: boolean
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "bSortable": false, "aTargets": [ 0 ] }
  6. ] } );
  7. } );
  8. // Using aoColumns
  9. $(document).ready( function() {
  10. $(‘#example‘).dataTable( {
  11. "aoColumns": [
  12. { "bSortable": false },
  13. null,
  14. null,
  15. null,
  16. null
  17. ] } );
  18. } );

复制代码

bUseRendered ：高版本已经废弃这个属性，没有使用过，直接翻译吧！当使用fnRender()为一个
列,您可能希望使用原始的数据(在呈现之前)进行排序和过滤(默认是用于呈现的数据,用户可以看到)。这可能是有用的日期等。请注意,该选项已被弃用,将
被删除的下一个版本的datatable。请用mRender / mData而不是fnRender。

Default: true
Type: boolean

无例子代码；
bVisible：启用或禁用本列显示。

Default: true
Type: boolean
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "bVisible": false, "aTargets": [ 0 ] }
  6. ] } );
  7. } );
  8. // Using aoColumns
  9. $(document).ready( function() {
  10. $(‘#example‘).dataTable( {
  11. "aoColumns": [
  12. { "bVisible": false },
  13. null,
  14. null,
  15. null,
  16. null
  17. ] } );
  18. } );

复制代码

fnCreatedCell：开发人员可定义的函数,就会调用一个细胞被创建(Ajax源等)或处理输入(DOM源)。这可以作为一种恭维,mRender允许您修改DOM元素(例如添加背景颜色)当元素是可用的。

Default:  
Type: function
  1. $(document).ready( function() {
  2. $(‘#example‘).dataTable( {
  3. "aoColumnDefs": [ {
  4. "aTargets": [3],
  5. "fnCreatedCell": function (nTd, sData, oData,
    iRow, iCol) {
  6. if ( sData ==
    "1.7" ) {
  7. $(nTd).css(‘color‘, ‘blue‘)
  8. }
  9. }
  10. } ]
  11. });
  12. } );

复制代码

fnRender：高版本已经废弃这个属性。mRender这个代替

iDataSort：列索引(从0开始!),你想要执行一个在本专栏时被选中进行排序。这可以用于排序在隐藏列例如。这个也没使用过

Default: -1 Use automatically calculated column
index
Type: int
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "iDataSort": 1, "aTargets": [ 0 ] }
  6. ]
  7. } );
  8. } );
  9. // Using aoColumns
  10. $(document).ready( function() {
  11. $(‘#example‘).dataTable( {
  12. "aoColumns": [
  13. { "iDataSort": 1 },
  14. null,
  15. null,
  16. null,
  17. null
  18. ]
  19. } );
  20. } );

复制代码

mData：这个属性可以用来读取JSON数据从任何数据源属性,包括深层嵌套对象/属性。可以给mData在许多不同的方面影响其行为:

  • integer - treated
    as an array index for the data source. This is the default that
    DataTables uses (incrementally increased for each column).
  • string - read an
    object property from the data source. Note that you can use
    Javascript dotted notation to read deep properties / arrays from
    the data source.
  • null - the
    sDefaultContent option will 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 generated columns
    such as edit / delete action columns.
  • function - the
    function given will be executed whenever DataTables needs to set or
    get the data for a cell in the column. The function takes three
    parameters:

    • {array|object} The
      data source for the row
    • {string} The type
      call data requested - this will be ‘set‘ when setting data or
      ‘filter‘, ‘display‘, ‘type‘, ‘sort‘ or undefined when gathering
      data. Note that
      when undefined is given
      for the type DataTables expects to get the raw data for the object
      back
    • {*} Data to set
      when the second parameter is ‘set‘.

    The return value from the function is not required when ‘set‘ is
    the type of call, but otherwise the return is what will be used for
    the data requested.

Default: null Use automatically calculated column
index
Type: string
  1. // Read table data from objects
  2. $(document).ready( function() {
  3. var oTable =
    $(‘#example‘).dataTable( {
  4. "sAjaxSource":
    "sources/deep.txt",
  5. "aoColumns": [
  6. { "mData": "engine" },
  7. { "mData": "browser" },
  8. { "mData": "platform.inner" },
  9. { "mData": "platform.details.0" },
  10. { "mData": "platform.details.1" }
  11. ]
  12. } );
  13. } );
  14. // Using mData as a function to provide different information
    for
  15. // sorting, filtering and display. In this case, currency
    (price)
  16. $(document).ready( function() {
  17. var oTable =
    $(‘#example‘).dataTable( {
  18. "aoColumnDefs": [ {
  19. "aTargets": [ 0 ],
  20. "mData": function ( source, type, val ) {
  21. if (type ===
    ‘set‘) {
  22. source.price = val;
  23. // Store
    the computed dislay and filter values for efficiency
  24. source.price_display = val=="" ? "" : "[ 
      
       DISCUZ_CODE_7 
      
       ]quot;+numberFormat(val);
  25. source.price_filter  = val=="" ?
    "" : "[    
       DISCUZ_CODE_7 
      
       ]quot;+numberFormat(val)+"
    "+val;
  26. return;
  27. }
  28. else if (type
    === ‘display‘) {
  29. return
    source.price_display;
  30. }
  31. else if (type
    === ‘filter‘) {
  32. return
    source.price_filter;
  33. }
  34. // ‘sort‘,
    ‘type‘ and undefined all just use the integer
  35. return
    source.price;
  36. }
  37. } ]
  38. } );
  39. } );

复制代码

mRender ：This property is the
rendering partner to mData and it is suggested that when you want
to manipulate data for display (including filtering, sorting etc)
but not altering the underlying data for the table, use this
property. mData can actually do everything this property can and
more, but this parameter is easier to use since there is no ‘set‘
option. Like mData is can be given in a number of different ways to
effect its behaviour, with the addition of supporting array syntax
for easy outputting of arrays (including arrays of objects):

  • integer - treated
    as an array index for the data source. This is the default that
    DataTables uses (incrementally increased for each column).
  • string - read an
    object property from the data source. Note that you can use
    Javascript dotted notation to read deep properties / arrays from
    the data source and also array brackets to indicate that the data
    reader should loop over the data source array. When characters are
    given between the array brackets, these characters are used to join
    the data source array together. For example: "accounts[, ].name"
    would result in a comma separated list with the ‘name‘ value from
    the ‘accounts‘ array of objects.
  • function - the
    function given will be executed whenever DataTables needs to set or
    get the data for a cell in the column. The function takes three
    parameters:

    • {array|object} The
      data source for the row (based on mData)
    • {string} The type
      call data requested - this will be ‘filter‘, ‘display‘, ‘type‘ or
      ‘sort‘.
    • {array|object} The
      full data source for the row (not based on mData)

    The return value from the function is what will be used for the
    data requested.

Default: null Use mData
Type: string
  1. // Create a comma separated list from an array of objects
  2. $(document).ready( function() {
  3. var oTable =
    $(‘#example‘).dataTable( {
  4. "sAjaxSource":
    "sources/deep.txt",
  5. "aoColumns": [
  6. { "mData": "engine" },
  7. { "mData": "browser" },
  8. {
  9. "mData":
    "platform",
  10. "mRender":
    "[, ].name"
  11. }
  12. ]
  13. } );
  14. } );
  15. // Use as a function to create a link from the data source
  16. $(document).ready( function() {
  17. var oTable =
    $(‘#example‘).dataTable( {
  18. "aoColumnDefs": [ {
  19. "aTargets": [ 0 ],
  20. "mData": "download_link",
  21. "mRender": function ( data, type, full ) {
  22. return
    ‘Download‘;
  23. }
  24. } ]
  25. } );
  26. } );

复制代码

sCellType：Change the cell type created for the
column - either TD cells or TH cells. This can be useful as TH
cells have semantic meaning in the table body, allowing them to act
as a header for a row (you may wish to add scope=‘row‘ to the TH
elements).

Default: td
Type: string
  1. // Make the first column use TH cells
  2. $(document).ready( function() {
  3. var oTable =
    $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [ {
  5. "aTargets": [ 0 ],
  6. "sCellType": "th"
  7. } ]
  8. } );
  9. } );

复制代码

sClass：给列加上自己定义的属性

Default: Empty string
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sClass": "my_class", "aTargets": [ 0 ] }
  6. ]
  7. } );
  8. } );
  9. // Using aoColumns
  10. $(document).ready( function() {
  11. $(‘#example‘).dataTable( {
  12. "aoColumns": [
  13. { "sClass": "my_class" },
  14. null,
  15. null,
  16. null,
  17. null
  18. ]
  19. } );
  20. } );

复制代码

sContentPadding ：When DataTables
calculates the column widths to assign to each column, it finds the
longest string in each column and then constructs a temporary table
and reads the widths from that. The problem with this is that "mmm"
is much wider then "iiii", but the latter is a longer string - thus
the calculation can go wrong (doing it properly and putting it into
an DOM object and measuring that is horribly(!) slow). Thus as a
"work around" we provide this option. It will append its value to
the text that is found to be the longest string for the column -
i.e. padding. Generally you shouldn‘t need this, and it is not
documented on the general DataTables.net documentation

Default: Empty string
Type: string
  1. // Using aoColumns
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumns": [
  5. null,
  6. null,
  7. null,
  8. {
  9. "sContentPadding":
    "mmm"
  10. }
  11. ]
  12. } );
  13. } );

复制代码

sDefaultContent ：Allows a default
value to be given for a column‘s data, and will be used whenever a
null data source is encountered (this can be because mData is set
to null, or because the data source itself is null).

Default: null
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. {
  6. "mData":
    null,
  7. "sDefaultContent":
    "Edit",
  8. "aTargets": [
    -1 ]
  9. }
  10. ]
  11. } );
  12. } );
  13. // Using aoColumns
  14. $(document).ready( function() {
  15. $(‘#example‘).dataTable( {
  16. "aoColumns": [
  17. null,
  18. null,
  19. null,
  20. {
  21. "mData":
    null,
  22. "sDefaultContent":
    "Edit"
  23. }
  24. ]
  25. } );
  26. } );

复制代码

sName：This parameter is only used in DataTables‘
server-side processing. It can be exceptionally useful to know what
columns are being displayed on the client side, and to map these to
database fields. When defined, the names also allow DataTables to
reorder information from the server if it comes back in an
unexpected order (i.e. if you switch your columns around on the
client-side, your server-side code does not also need
updating).

Default: Empty string
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sName": "engine", "aTargets": [ 0 ] },
  6. { "sName": "browser", "aTargets": [ 1 ] },
  7. { "sName": "platform", "aTargets": [ 2 ] },
  8. { "sName": "version", "aTargets": [ 3 ] },
  9. { "sName": "grade", "aTargets": [ 4 ] }
  10. ]
  11. } );
  12. } );
  13. // Using aoColumns
  14. $(document).ready( function() {
  15. $(‘#example‘).dataTable( {
  16. "aoColumns": [
  17. { "sName": "engine" },
  18. { "sName": "browser" },
  19. { "sName": "platform" },
  20. { "sName": "version" },
  21. { "sName": "grade" }
  22. ]
  23. } );
  24. } );

复制代码

sSortDataType ：Defines a data
source type for the sorting which can be used to read real-time
information from the table (updating the internally cached version)
prior to sorting. This allows sorting to occur on user editable
elements such as form inputs.

Default: std
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sSortDataType": "dom-text", "aTargets": [ 2, 3
    ] },
  6. { "sType": "numeric", "aTargets": [ 3 ] },
  7. { "sSortDataType": "dom-select", "aTargets": [ 4
    ] },
  8. { "sSortDataType": "dom-checkbox", "aTargets": [
    5 ] }
  9. ]
  10. } );
  11. } );
  12. // Using aoColumns
  13. $(document).ready( function() {
  14. $(‘#example‘).dataTable( {
  15. "aoColumns": [
  16. null,
  17. null,
  18. { "sSortDataType": "dom-text" },
  19. { "sSortDataType": "dom-text", "sType": "numeric"
    },
  20. { "sSortDataType": "dom-select" },
  21. { "sSortDataType": "dom-checkbox" }
  22. ]
  23. } );
  24. } );

复制代码

sTitle ：The title of this
column.

Default: null Derived from the ‘TH‘ value for this
column in the original HTML table.
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sTitle": "My column title", "aTargets": [ 0 ]
    }
  6. ]
  7. } );
  8. } );
  9. // Using aoColumns
  10. $(document).ready( function() {
  11. $(‘#example‘).dataTable( {
  12. "aoColumns": [
  13. { "sTitle": "My column title" },
  14. null,
  15. null,
  16. null,
  17. null
  18. ]
  19. } );
  20. } );

复制代码

sType：The type allows you to specify how the data
for this column will be sorted. Four types (string, numeric, date
and html (which will strip HTML tags before sorting)) are currently
available. Note that only date formats understood by Javascript‘s
Date() object will be accepted as type date. For example: "Mar 26,
2008 5:03 PM". May take the values: ‘string‘, ‘numeric‘, ‘date‘ or
‘html‘ (by default). Further types can be adding through
plug-ins.

Default: null Auto-detected from raw data
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sType": "html", "aTargets": [ 0 ] }
  6. ]
  7. } );
  8. } );
  9. // Using aoColumns
  10. $(document).ready( function() {
  11. $(‘#example‘).dataTable( {
  12. "aoColumns": [
  13. { "sType": "html" },
  14. null,
  15. null,
  16. null,
  17. null
  18. ]
  19. } );
  20. } );

复制代码

sWidth：Defining the width of the column, this
parameter may take any CSS value (3em, 20px etc). DataTables
applies ‘smart‘ widths to columns which have not been given a
specific width through this interface ensuring that the table
remains readable.

Default: null Automatic
Type: string
  1. // Using aoColumnDefs
  2. $(document).ready( function() {
  3. $(‘#example‘).dataTable( {
  4. "aoColumnDefs": [
  5. { "sWidth": "20%", "aTargets": [ 0 ] }
  6. ]
  7. } );
  8. } );
  9. // Using aoColumns
  10. $(document).ready( function() {
  11. $(‘#example‘).dataTable( {
  12. "aoColumns": [
  13. { "sWidth": "20%" },
  14. null,
  15. null,
  16. null,
  17. null
  18. ]
  19. } );
  20. } );

最后注明：本文转自http://blog.csdn.net/lisky119/article/details/25884197

时间： 2024-10-09 06:29:01

jquery datatables api（2）的相关文章

jquery datatables api （转）

学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码   <style type="text/css" title="currentStyle"> @import "css/dem

jquery datatables api（3）

三:回调 fnCookieCallback:还没有使用过 $(document).ready( function () { $('#example').dataTable( { "fnCookieCallback": function (sName, oData, sExpires, sPath) { // Customise oData or sName or whatever else here return sName + "="+JSON.stringify

我这么玩Web Api（二）：数据验证，全局数据验证与单元测试

目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试   一.模型状态 - ModelState 我理解的ModelState是微软在ASP.NET MVC中提出的一种新机制,它主要实现以下几个功能: 1. 保存客户端传过来的数据,如果验证不通过,把数据返回到客户端,这样可以保存用户输入,不需要重新输入. 2. 验证数据,以及保存数据对应的错误信息. 3. 微软的一种DRY(Don't Repeat

跟我一起学写jQuery插件开发方法（转载）

jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧.这是我写的一个jQuery插件.”我想基本上你的

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

用产品思维设计API（三）——版本控制，没有你想的这么简单

用产品思维设计API(三)--版本控制,没有你想的这么简单 前言 最近公司内部在重构项目代码,包括API方向的重构,期间遇到了很多的问题,不由得让我重新思考了下. - 一个优雅的API该如何设计? - 前后端分离之后,API真的解耦分离了吗? - 不断的版本迭代,API的兼容性该如何做? ps.这里所说的API仅为Web API,提供APP\WEB开发使用. 年前,我司内部的接口已经进入了一个完全的重构阶段,参考了市面上各大平台的API和文档,自己也总结出了很多的心得.这里向大家分享一下,接下来

Js脚本之jQuery学习笔记（1）

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

菜鸟学jQuery源码（一）

整个jQuery是一个自调用的匿名函数: 1 (function(global, factory) { 2 if (typeof module === "object" && typeof module.exports === "object") { 3 module.exports = global.document ? 4 factory(global, true) : 5 function(w) { 6 if (!w.document) { 7

菜鸟学jQuery源码（前言）

前言 相信任何一名前端开发人员或者是前端爱好者都对jQuery不陌生.jQuery简单易用,功能强大,特别是拥有良好的浏览器兼容性,大大降低了前端开发的难度,使得前端开发变得“平易近人起来”.自从本人用了jQuery,顿时感觉到人生再也不是灰色的了,又能够快乐的工作了. 不过在每天码得飞起的同时,我也对jQuery充满好奇,所以也特意的去查了一下资料.现在网上和书店里面有非常多的资料对jQuery源码从各种角度进行解析,大多都是对jQuery进行总结.归纳从上往下的分析.不过本人作为一名刚毕业的