jquery datatables api

Posted 看一场塞北的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery datatables api相关的知识，希望对你有一定的参考价值。

二： 列属性

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. 以上是关于jquery datatables api的主要内容，如果未能解决你的问题，请参考以下文章

    找不到文件'dataTables/jquery.dataTables' Rails 4

    001_ jQuery的表格插件dataTable详解

    jquery datatable如何动态分页

    JQuery插件之Jquery.datatables.js用法及api

    jquery datatable怎么做到筛选

    Jquery DataTable基本使用