博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery Datatables常用配置
阅读量:6071 次
发布时间:2019-06-20

本文共 2728 字,大约阅读时间需要 9 分钟。

hot3.png

官网: 中文网:

我用过的一些配置:

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返回给该行的所有数据)            });        }    });

转载于:https://my.oschina.net/AnymoreCoder/blog/801298

你可能感兴趣的文章
ubuntu安装经常使用记录
查看>>
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
查看>>
真正的英雄
查看>>
浅谈服务器虚拟化的七大好处
查看>>
Android批量图片加载经典系列——使用LruCache、AsyncTask缓存并异步加载图片
查看>>
pip超时更换源
查看>>
Progress数据库配置与应用
查看>>
PowerDesigner使用教程 —— 概念数据模型(转)
查看>>
caffe rpn layer 中的 reshape layer
查看>>
Java正则表达式的解释说明
查看>>
20172304 《程序设计与数据结构》第七周学习总结
查看>>
mysql 与linux ~ 内存分析与调优
查看>>
Linux如何实现开机启动程序详解
查看>>
C#制作鼠标可以穿透的窗体
查看>>
SQL Server2005配置同步复制
查看>>
20155229付钰涵-虚拟机安装及LINUX命令学习
查看>>
mybatis-generator-1.3.7用法
查看>>
gulp的入门
查看>>
洛谷 P2725 邮票 Stamps Label:DP
查看>>
网络传输基础
查看>>