<html><head></head>

<script type="text/javascript">
        $(document).ready(function () {
            $("#datatable1").dataTable({
                "bPaginate": true,//开关是否分显示页器
                "bInfo": true,//开关，是否显示表格的一些信息
                "bFilter": true,//开关，是否启用客户端的过滤器
                "sDom": "<>Ifrtip<>",
                "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>

</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="datatable1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>地址</th>
            </tr>
        </thead>

        <tbody>
            <tr class="old gradeX">
                <td>
                    XXX
                </td>
                <td>
                    男
                </td>
                <td class="center">
                    12
                </td>
                <td class="center">
                    济南
                </td>
            </tr>

            <tr class="old gradeX">
                <td>
                    ZZZ
                </td>
                <td>
                    男
                </td>
                <td class="center">
                    11
                </td>
                <td class="center">
                    北京
                </td>
            </tr>

            <tr class="old gradeX">
                <td>
                   HHH
                </td>
                <td>
                    男
                </td>
                <td class="center">
                    15
                </td>
                <td class="center">
                    上海
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

jquery datatable的更多相关文章

  1. jquery dataTable汉化（插件形式）

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  2. JQuery Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  3. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

  4. jQuery DataTable 删除数据后重新加载

    问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累 ...

  5. JQuery Datatable用法

    原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...

  6. jQuery Datatable 转载

    jQuery Datatable 实用简单实例 时间 2014-05-08 10:44:18  51CTO推荐博文 原文  http://sgyyz.blog.51cto.com/5069360/14 ...

  7. JQuery DataTable的配置项及事件

    当我们需要在加载或者显示表格的时候,改变jquery datatable 的数据,或增加一些html标签处理. 可以通过Jquery DataTable的回调函数处理. 实例代码: if (oTabl ...

  8. jquery datatable 多行(单行)选择(select)，行获取/行删除

    jquery datatable 多行(单行)选择(select),行获取/行删除 代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...

  9. jquery datatable设置垂直滚动后，表头(th)错位问题

    jquery datatable设置垂直滚动后,表头(th)错位问题 问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...

  10. jquery datatable 获取当前分页的数据

    使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...

随机推荐

  1. Linq学习笔记（转）

    开始Linq前你要知道的 扩展方法 顾名思义就是对现有类进行扩展的的方法,扩展方法可以在不修改现有类的情况下,为现有类增加公共的接口(不是C#中的interface). 扩展方法本质上是一个静态方法, ...

  2. Oracle取TOP N条记录(转载)

    在SQL Server里面有top关键字可以很方便的取出前N条记录,但是Oracle里面却没有top的使用,类似实现取出前N条记录的简单方法如下: 方法1:利用ROW_NUMBER函数 取出前5条记录 ...

  3. [ARM] Cortex-M Startup.s启动文件相关代码解释

    1. 定义一个段名为CSTACK, 这里: NOROOT表示如何定义的段没有被关联,那么同意会被优化掉,如果不想被优化掉就使用ROOT. 后面的括号里数字表示如下: (1):这个段是2的1次方即2字节 ...

  4. iptables/Netfilter 学习

    开始学iptables,因为它是和路由器技术紧密结合在一起的. iptables的命令看起来眼花缭乱,随便找两个: iptables -A FORWARD -p tcp -s -d -j ACCEPT ...

  5. 架构系列：ASP.NET 项目结构搭建

    我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都简单的单项目 (2)为 ...

  6. JQuery功能查询页

    JQuery在前端开发中已经是常用的不能再常用的库了.最近的项目中使用到了JQuery,我第一次接触它的时候为了学习,把常用的操作指令用比较小的字体写在一页word上,打印出来贴在桌子上,用来让自己时 ...

  7. ModernUI教程：处理内容导航事件

    Modern UI包含了一个机遇uri的内容导航框架用来处理区域加载.卸载和处理访问记录页面间的导航. 如果你希望你的页面具有这些处理事件,你需要继承一个IContent接口,该接口位于FirstFl ...

  8. j-link或者swd调试

    两种 一.JTAG调试(5针), 二.SWD调试(2针), 在JTAG/SWD模式设置库函数 (在文件stm32f10x_gpio.c中): void GPIO_PinRemapConfig(uint ...

  9. SNMP 原理与实战详解

    原文地址:http://freeloda.blog.51cto.com/2033581/1306743 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...

  10. SSH登录之后运行命令报错的解决办法-- Failed to connect to Mir: Failed to connect to server socket: No such file or directory

    问题描述: Failed to connect to Mir: Failed to connect to server socket: No such file or directory 解决方案: ...