jQuery的表格插件 - DataTables
openkk
13年前
<p>DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:</p> <ul> <li>自动分页处理</li> <li>即时表格数据过滤</li> <li>数据排序以及数据类型自动检测</li> <li>自动处理列宽度</li> <li>可通过CSS定制样式</li> <li>支持隐藏列</li> <li>易用</li> <li>可扩展性和灵活性</li> <li>国际化</li> <li>动态创建表格</li> <li>免费的</li> </ul> <p><img alt="jQuery的表格插件 - DataTables" src="https://simg.open-open.com/show/161477de02dfc925cfe9624ce72b9ff1.png" width="500" height="214" /><br /> </p> <pre class="brush:javascript; toolbar: true; auto-links: false;">-----------最简单的方式: $(document).ready(function() { $("#example").dataTable(); }); ----------也可以自己定义各属性: <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#example").dataTable({ // "bPaginate": true, //开关,是否显示分页器 // "bInfo": true, //开关,是否显示表格的一些信息 // "bFilter": true, //开关,是否启用客户端过滤器 // "sDom": "<>lfrtip<>", // "bAutoWith": false, // "bDeferRender": false, // "bJQueryUI": false, //开关,是否启用JQueryUI风格 // "bLengthChange": true, //开关,是否显示每页大小的下拉框 // "bProcessing": true, // "bScrollInfinite": false, // "sScrollY": "800px", //是否开启垂直滚动,以及指定滚动区域大小,可设值:'disabled','2000px' // "bSort": true, //开关,是否启用各列具有按列排序的功能 // "bSortClasses": true, // "bStateSave": false, //开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的, 打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 // "sScrollX": "50%", //是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%' // "aaSorting": [[0, "asc"]], // "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 // "sDom": '<"H"if>t<"F"if>', "bAutoWidth": false, //自适应宽度 "aaSorting": [[1, "asc"]], "sPaginationType": "full_numbers", "oLanguage": { "sProcessing": "正在加载中......", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "对不起,查询不到相关数据!", "sEmptyTable": "表中无数据存在!", "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", "sInfoFiltered": "数据表中共为 _MAX_ 条记录", "sSearch": "搜索", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "末页" } } //多语言配置 }); }); </script></pre> <p><strong>项目主页:</strong><a href="http://www.open-open.com/lib/view/home/1325744494375" target="_blank">http://www.open-open.com/lib/view/home/1325744494375</a></p> <p></p> <p> </p>