jQuery dataTables

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

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

 

 

-----------最简单的方式：

 $(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>

 

评论

5 楼 check-枫叶 2012-12-30  

楼主你好！ 刚刚接触datatables这个插件，请教下如果我要标题固定，下面的数据内容滚动应该是怎么设置的呀？

4 楼 ssy341 2012-10-04  

shangliuyan 写道

楼主你好，我刚接触datatables，运行了example，发现他的那个search没有用啊，输入什么都没反应，但是文档中说了有filter功能，楼主知道这个问题吗？

这个应该是没有问题的，你再好好检查一下

comeonbabye 写道

你试试  "bFilter": true, //开关，是否启用客户端过滤器，或者找找API的属性或者方法。

我很久没弄这个了，我现在用jquery ui了

他是没反应，如果他设置为false了，那个搜索框都不会出现

daogugo 写道

楼主好 ，不知楼主有没有空 请教下jQuery datatables。 把第一列不显示， 却要拿到第一列的值，怎么拿. "bVisible": false  这条代码是设置本列不显示，

官网写了一个得到一行的数据的方法，实现方法是，给这一行加上样式，然后得到有样式的这行数据，再把得到的数据封装为datatables数据格式，你就可以得到了，bvisible只是不显示，但不是取不到值

Datatables交流群
http://bbs.sailit.cn/forum.php?mod=viewthread&tid=70&fromuid=4
欢迎博主 一起交流交流

3 楼 daogugo 2012-05-10  

楼主好 ，不知楼主有没有空 请教下jQuery datatables。 把第一列不显示， 却要拿到第一列的值，怎么拿. "bVisible": false  这条代码是设置本列不显示，

2 楼 comeonbabye 2012-04-02  

你试试  "bFilter": true, //开关，是否启用客户端过滤器，或者找找API的属性或者方法。

我很久没弄这个了，我现在用jquery ui了

1 楼 shangliuyan 2012-03-31  

楼主你好，我刚接触datatables，运行了example，发现他的那个search没有用啊，输入什么都没反应，但是文档中说了有filter功能，楼主知道这个问题吗？