java使用Jquery报表插件datatables

2013-12-26

java使用Jquery表格插件datatables??3、数据来源是 AJAX，请求一个JSON类型的有aaData属性的txt。????? 在初

java使用Jquery表格插件datatables


?
3、数据来源是 AJAX，请求一个JSON类型的有aaData属性的txt。
????? 在初始化参数对象中，通过 sAjaxSource 的属性传递请求的地址，bProcessing 表示是否需要显示一个工作中的提示。
????? 在 JSON 方式返回的数据中，需要一个名为 aaData 的属性来提供实际的数据。
?
??? 后台获取自己添加的额外参数：
]
} );
} );
?
从第0列开始，以第4列倒序排列
?
示例：http://www.guoxk.com/html/DataTables/Sorting-data.html
?
多列排序：点击列头看效果
?
示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html
?
2、隐藏某些列
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
?
示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html
?
3、改变页面上元素的位置
$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: "sDom" : 'T<"clear">rltip',
示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html
?
4、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
??? 做查询的时候，这个方法慎用。
?
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );
示例：http://www.guoxk.com/html/DataTables/State-saving.html
?
?
5、限制宽度和高度
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
?
示例：http://www.guoxk.com/html/DataTables/Change-language-information.html
?
7、click事件
示例：http://www.guoxk.com/html/DataTables/event-click.html
?
8、配合使用tooltip插件
示例：http://www.guoxk.com/html/DataTables/tooltip.html
?
9、定义每页显示数据数量
$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
?10、显示行的详细信息，点击行开头的“+”号展开细节显示
参考地址：http://www.datatables.net/release-datatables/examples/api/editable.html

热点排行

行业软件

java使用Jquery报表插件datatables