文档章节

jQuery Datatables常用配置

Anymore
 Anymore
发布于 2016/12/07 11:06
字数 773
阅读 356
收藏 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
粉丝 5
博文 58
码字总数 27877
作品 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 1.10.19 发布,jQuery 表格插件

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

淡漠悠然
06/25
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

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

冬至饮雪
2017/08/04
0
0
Datatables + Bootstrap 组合基础示例 2

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

星塵子
2013/05/05
0
1

没有更多内容

加载失败,请刷新页面

加载更多

用户体验要素——以用户为设计中心

一、用户体验是什么 产品会与外界发生联系,人们如何去使用产品,人们使用产品无非解决两种问题,一,提高效率;二娱乐。而用户体验兼顾着功能和界面两个方面,为的是“提高人们的工作效率”...

铸剑为犁413
39分钟前
0
0
学习设计模式——代理模式

1. 认识代理模式 1. 定义:为其他对象提供一种代理以控制对这个对象的访问。 2. 组织结构: Proxy:代理对象,要实现与目标代理对象的相同的接口,这样就可以使用代理来代替具体的目标对象,...

江左煤郎
今天
1
0
java JDK动态代理

本篇随笔是对java动态代理中的JDK代理方式的具体实现。 首先需要定义一个接口,为其定义了两个方法:   public interface UserService { public void add(); public void delete(); } 然后需...

编程SHA
今天
2
0
轻松理解Dubbo分布式服务框架

Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的...

别打我会飞
今天
2
0
TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部