jQuery dataTables

中关村村草

jQuery dataTables

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：http://www.datatables.net/

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的






Js代码

1. -----------最简单的方式：   
   
2.   
   
3. $(document).ready(function() {   
   
4.   
   
5. $("#example").dataTable();   
   
6.   
   
7. });   
   
8.   
   
9.    
   
10.   
    
11. ----------也可以自己定义各属性：   
    
12.   
    
13. <script type="text/javascript" language="javascript">   
    
14.         $(document).ready(function() {   
    
15.             $("#example").dataTable({   
    
16. //                "bPaginate": true, //开关，是否显示分页器   
    
17. //                "bInfo": true, //开关，是否显示表格的一些信息   
    
18. //                "bFilter": true, //开关，是否启用客户端过滤器   
    
19. //                "sDom": "<>lfrtip<>",   
    
20. //                "bAutoWith": false,   
    
21. //                "bDeferRender": false,   
    
22. //                "bJQueryUI": false, //开关，是否启用JQueryUI风格   
    
23. //                "bLengthChange": true, //开关，是否显示每页大小的下拉框   
    
24. //                "bProcessing": true,   
    
25. //                "bScrollInfinite": false,   
    
26. //                "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'   
    
27. //                "bSort": true, //开关，是否启用各列具有按列排序的功能   
    
28. //                "bSortClasses": true,   
    
29. //                "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的， 打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列   
    
30. //                "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'   
    
31. //                "aaSorting": [[0, "asc"]],   
    
32.   
    
33. //                "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列   
    
34. //                "sDom": '<"H"if>t<"F"if>',   
    
35.                 "bAutoWidth": false, //自适应宽度   
    
36.                 "aaSorting": [[1, "asc"]],   
    
37.                 "sPaginationType": "full_numbers",   
    
38.                 "oLanguage": {   
    
39.                     "sProcessing": "正在加载中......",   
    
40.                     "sLengthMenu": "每页显示 _MENU_ 条记录",   
    
41.                     "sZeroRecords": "对不起，查询不到相关数据！",   
    
42.                     "sEmptyTable": "表中无数据存在！",   
    
43.                     "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",   
    
44.                     "sInfoFiltered": "数据表中共为 _MAX_ 条记录",   
    
45.                     "sSearch": "搜索",   
    
46.                     "oPaginate": {   
    
47.                         "sFirst": "首页",   
    
48.                         "sPrevious": "上一页",   
    
49.                         "sNext": "下一页",   
    
50.                         "sLast": "末页"  
    
51.                     }   
    
52.                 } //多语言配置   
    
53.   
    
54.    
    
55.   
    
56.             });   
    
57.         });   
    
58.     </script>  

复制代码

星期六的深夜68

谢谢分享