jquery datatable

<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的更多相关文章

jquery dataTable汉化（插件形式）
1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...
JQuery Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
jQuery DataTable 删除数据后重新加载
问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累 ...
JQuery Datatable用法
原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...
jQuery Datatable 转载
jQuery Datatable 实用简单实例时间 2014-05-08 10:44:18 51CTO推荐博文原文 http://sgyyz.blog.51cto.com/5069360/14 ...
JQuery DataTable的配置项及事件
当我们需要在加载或者显示表格的时候,改变jquery datatable 的数据,或增加一些html标签处理. 可以通过Jquery DataTable的回调函数处理. 实例代码: if (oTabl ...
jquery datatable 多行(单行)选择(select)，行获取/行删除
jquery datatable 多行(单行)选择(select),行获取/行删除代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...
jquery datatable设置垂直滚动后，表头(th)错位问题
jquery datatable设置垂直滚动后,表头(th)错位问题问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...
jquery datatable 获取当前分页的数据
使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...

随机推荐

java 28 - 5 JDK5的新特性之枚举的使用
上一章,自定义了枚举类,超级麻烦.. 所以,JAVA给了一个枚举类:类 Enum<E extends Enum<E>> 注意事项定义枚举类要用关键字enum 所有枚举类都是E ...
学习cocos code ide 的lua编程
装上了cocos code ide,配了路径之后,建立一个默认lua工程,发现无法调试,报错. 问了别人,在cocos2dconstants.lua的613行插入cc.AsyncTaskPool = ...
fancybox的配置项
Fancybox的API和配置选项说明属性名默认值简要说明 padding 10 浏览框内边距,和css中的padding一个意思 margin 20 浏览框外边距,和css中的margin一个 ...
vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
xpath 参考
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...
修改Esxi克隆的CentOS的IP地址
1.读取/etc/udev/rules.d/70-persistent-net.rules文件中eth1的MAC地址. 2.编辑文件 /etc/sysconfig/network-script/ifc ...
easyui 中Datagrid 控件在列较多且无数据时，列显示不全的解决方案
在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var ...
深入理解 cocos2d-x 坐标系
首先对于初学的,带大家认识 cocos2d-x 中坐标系的几个概念,参考 http://blog.csdn.net/tskyfree/article/details/8292544.其他的往下看. 弄 ...
js基础知识温习：Javascript中如何模拟私有方法
本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法公有方法 ...
sql server存储过程编程
存储过程是一组完成特定功能的SQL 语句集合,经编译后存储在数据库中. 存储过程作为一个单元进行处理并以一个名称来标识.它能向用户返回数据.向数据库表中写入或修改数据等操作. 用户通过指定存储过程 ...

jquery datatable

jquery datatable的更多相关文章

随机推荐

热门专题