文档章节

jQuery Datatables常用配置

Anymore
 Anymore
发布于 2016/12/07 11:06
字数 773
阅读 352
收藏 2

官网:Datatables官网 中文网:Datatables中文网

我用过的一些配置:

    var table=$('#tableId').dataTable({
        "destroy": true,//是否需要重复渲染表格,若是则true.
        "data": data,//数据来源,data来自上文ajax请求回掉函数中的data或定义在本地的data
        //ajax与上句的data有任何一个就可以了
        "ajax":{//datatable中的ajax
            async: true,//同步false异步true
            url:simMonitor.domain+"sim/searchSimBindState",
            dataSrc://dataSrc相当于success,在datatable里面不能用success方法,会覆盖datatable内部回调方法
                    function(data){
                        //data即服务器返回的数据
                        return data;//自定义数据源,默认为data
                    },
            type:"post",
            data:formData//ajax请求提交给服务器端的数据,一般是表单数据
        },
        "createdRow": function ( row, data, index ) {//该函数可对某指定行做操作,一般用于增加某种效果
            /* 设置表格中的内容居中 */
            $('td', row).attr("class","text-center");//所有行,text-center的属性需自己在相关css中自己写
            $('td:nth-child(3)', row).attr("class","textLeft");//第3列
            $('td:nth-child(10)', row).attr("class","textLeft");//第10列
        },
        "bStateSave": false,//状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。这个数据是记录在cookies中的,
        //打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的,并且当值为true时aoColumnDefs不能隐藏列
        "ordering":false,//排序功能
        "bAutoWidth":false,//宽度自适应。一般禁止,使用不当容易造成报错。(目前我还没有使用过)
        "searching":false,//右上角搜索框的显示与否
        "bLengthChange": true,//左上角改变每页显示数据数量的显示与否
        "sScrollX":true,//x轴滚动条,若是此项设置导致thead与tbody有间隙,可设置margin消除或在table的html中设置width="100%" cellspacing="0"
        "bInfo": true,//页脚信息的显示与否
        "bPaginate" : true,//翻页功能的显示与否
        "sCharSet":"utf-8",//设置编码格式
        "deferRender": true,//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
        "oLanguage": {//设置语言
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉, 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            },
            "sProcessing": true//"加载中...."的显示与否
        },
        "columns":[//渲染列,一列一列将数据填充进去,thead中标识有多少列此处就写多少列,并且将数据填充进去,数据来源于上文的data,函数中的row即data
            {"data":function(row){
                cellData=(row.operator == "" || row.operator == null) ? "--":row.operator;
                return cellData;
            },
                "type" : "string"
            }
            //其他列data省略....
        ],
        "rowCallback": function( row, data ) {//行的回调函数
            $(row.cells[13]).click(function(){
                console.log(data);
                //每行的第13个子元素(列)被点击之后,会打印出该行的所有值(不仅仅是显示的,而是data返回给该行的所有数据)
            });
        }
    });

© 著作权归作者所有

共有 人打赏支持
Anymore
粉丝 4
博文 56
码字总数 26222
作品 0
塘沽
前端工程师
jQuery的DataTables插件的使用方法

一:官方网站:http://www.datatables.net/ 二:基本使用:http://www.guoxk.com/node/jquery-datatables 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable......

星痕2018
2013/03/01
0
0
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
0
1
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0
DataTables 1.10.19 发布,jQuery 表格插件

DataTables 1.10.19 已发布,DataTables 是一个 jQuery 的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何 HTML 表格。 未找到该版本的具体更新内...

淡漠悠然
06/25
0
0
Datatables + Bootstrap 组合基础示例 2

前言 示例 1 请见[上一篇博文][1]。 示例 2 Datatables 插件使用 Bootstrap 框架的组合示例。 功能 分页 / 排序 / 过滤 / json 数据源 / 数据导出 (需 flash 支持) / 自定义列 / 自定义分页选...

星塵子
2013/05/05
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring 事件

ContextRefreshedEvent Event raised when an {@code ApplicationContext} gets initialized or refreshed. ContextClosedEvent Event raised when an {@code ApplicationContext} gets clos......

Canaan_
32分钟前
1
0
leetcode两数之和

leetcode中求两数之和解决方法 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。 给定 nums = [2, 7, 11, ...

lar555
48分钟前
1
0
js实现限制网页内容复制

转载 在我们做的网页发到网上后,如果访客看到比较喜欢的内容,只要复制就可以变为自己的,自己辛辛苦苦弄半天还不及人家的一下复制,有时为了只让访客看到,而不能让它们复制内容,就用Jav...

lc_comeon
52分钟前
1
0
jenkins将spring boot项目发布到阿里云镜像中

1、spring boot项目 1.1 pom.xml配置 <artifactId>xxx-docker</artifactId><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.......

xixingzhe
今天
0
0
qsv格式可以在电视上播放吗

  大家都知道qsv格式是爱奇艺的独家缓存格式,是加密的,一般的播放器是无法播放的,只能在爱奇艺播放器上播放,如果想要在电视上播放,就必须要安装爱奇艺播放器,比较麻烦。其实还有一种...

萤火的萤火
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部