你的位置:首页 > Java教程

[Java教程]Jquery Datatable


DataTables(http://www.datatables.net/)是我目前项目用到的正在研究学习的技术,主要功能是给表格提供解决方案。初学者,会随着学习深入持续更新。


Jquery DataTables的特性: 
可变长度分页;动态过滤;多列排序,带数据类型检测功能;列宽度的智能处理;从多种数据源获取数据(DOM,js Array, ajax file, server-side returning);滚动配置属性;完整国际化支持; jquery UI ThemeRoller支持;经历了个2600多个单元测试,相当牢固;有为数不少的插件支持;免费的;状态保存能力;支持隐藏列;动态创建表格的能力;自动ajax数据加载;自定义DOM位置;单列过滤(这个与前面的过滤有区别么?);多种分页器;无损的DOM交互;参与排序的列高亮;高级数据源配置;扩展的插件支持功能;可以用css完全配置表象;丰富的文档; 110多个例子;对Adobe AIR的完全支持。 

>>零配置引入:

1 $(document).ready(function() {2   $('#example').DataTable();3 } );

>>特性的开关:

1 $(document).ready(function() {2   $('#example').dataTable( {3     "paging":  false, //关闭自动分页4     "ordering": false, //关闭自动排序功能5     "info":   false  //关闭页面统计信息功能6   } );7 } );

特性:

autoWidth

Feature control DataTables' smart column width handling 自动宽

deferRender

Feature control deferred rendering for additional speed of initialisation.

info

Feature control table information display field

jQueryUI

Use markup and classes for the table to be themed by jQuery UI ThemeRoller.

lengthChange

Feature control the end user's ability to change the paging display length of the table.

ordering

Feature control ordering (sorting) abilities in DataTables.

paging

Enable or disable table pagination. 自动分页

processing

Feature control the processing indicator.

scrollX

Horizontal scrolling

scrollY

Vertical scrolling

searching

Feature control search (filtering) abilities

serverSide

Feature control DataTables' server-side processing mode.

stateSave

State saving - restore table state on page reload

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

特性饮用比较简单。取值只有 true or false。

 

>>国际化 Internationalisation DataTables 支持多种语言,相关语言json文件可以从remote调用

$(document).ready(function() {  $('#example').dataTable( {    "language": {      "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"    }  } );} );

language.url

$(document).ready(function() {  $('#example').dataTable( {     "language": {       "aria": {            "sortDescending": " - click/return to sort descending"             }           }      } );} );

language.aria.sortAscending

 

ok,写两个并不是抽筋。只是想强调一下文档和代码的对应格式

好的 国际化

 

 

language.aria.sortAscending

Language strings used for WAI-ARIA specific attributes

language.aria.sortDescending

Language strings used for WAI-ARIA specific attributes

language.aria

Language strings used for WAI-ARIA specific attributes

language.decimal

Decimal place character

language.emptyTable

Table has no records string

language.info

Table summary information display string

language.infoEmpty

Table summary information string used when the table is empty or records

language.infoFiltered

Appended string to the summary information when the table is filtered

language.infoPostFix

String to append to all other summary information strings

language.lengthMenu

Page length options string

language.loadingRecords

Loading information display string - shown when Ajax loading data

language.paginate.first

Pagination 'first' button string

language.paginate.last

Pagination 'last' button string

language.paginate.next

Pagination 'next' button string

language.paginate.previous

Pagination 'previous' button string

language.paginate

Pagination specific language strings

language.processing

Processing indicator string

language.search

Search input string

language.searchPlaceholder

Search input element placeholder attribute

language.thousands

Thousands separator

language.url

Load language information from remote file

language.zeroRecords

Table empty as a result of filtering string

language

Language configuration options for DataTables

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

>> 列控制 DataTables 提供了丰富的列控制参数。其调配方法与国际化一致

 

columnDefs.targets

Assign a column definition to one or more columns.

columnDefs

Set column definition initialisation properties.

columns.cellType

Cell type to be created for a column

columns.className

Class to assign to each cell in the column

columns.contentPadding

Add padding to the text content used when calculating the optimal with for a table.

columns.createdCell

Cell created callback to allow DOM manipulation

columns.data

Set the data source for the column from the rows data object / array

columns.defaultContent

Set default, static, content for a column

columns.name

Set a descriptive name for a column

columns.orderable

Enable or disable ordering on this column

columns.orderData

Define multiple column ordering as the default order for a column

columns.orderDataType

Live DOM sorting type assignment

columns.orderSequence

Order direction application sequence

columns.render

Render (process) the data for use in the table

columns.searchable

Enable or disable filtering on the data in this column

columns.title

Set the column title

columns.type

Set the column type - used for filtering and sorting string processing

columns.visible

Enable or disable the display of this column

columns.width

Column width assignment

columns

Set column specific initialisation properties.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

>>