前端常用功能记录(三)—datatables表格初始化
其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解。下面记录的是datatables常用的功能的初始化。
数据源
我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组。
(字段的命名可以使用类型加字段名称也可以直接使用如aaData,也可以是data,aoColumns,也可以是columns)
如:
$(document).ready(function() {
$('#demo').html( '<table class="table b-t b-light" id="datatables"> </table>' );
$('#example').dataTable( {
data: [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
columns: [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "<b>A</b>";
}
return sReturn;
}
}
],
paging: false,
order:[
[1, "asc"]
],
dom: 'lrtp',
columnDefs: [
{width: '30%', targets: 0},
],
} );
} );
aoColumns 参数用来定义表格的列,这是一个数组,其中的每一个对象用来定义一列。
对于每一个列对象:
sTitle 定义列的标题
sClass 定义列的样式
fnRender 函数用来渲染列,这个函数将会传递一个参数对象,这个参数对象的 iDataColumn 属性表示当前的列索引,aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
如果data是从后台传过来的二维数组,则data可以赋值如下:
data: <%- JSON.stringify(aaData) %>, // aaData是后台传过来的
第二种方式是从HTML表(而不是一个Ajax或JavaScript数据源)读取数据表的内容,默认情况下它会读取表中的信息转换为内部数据表的数组。每个阵列元素表示一列。
传入的数据格式如下(如从数据库中读取返回的数据格式):
[{
"name": "...",
"position": "...",
"office": "...",
"age": "...",
"start_date": "...",
"salary": "..."},
{
"name": "...",
"position": "...",
"office": "...",
"age": "...",
"start_date": "...",
"salary": "..."},
]
表格初始化的格式如下:
$(document).ready(function() {
$('#example').DataTable({
"columns": [
{ "data": "name", },
{ "data": "position" ,},
{ "data": "office", },
{ "data": "age", },
{ "data": "start_date", },
{ "data": "salary" ,"visible": false,}
],
"order": [
[3, "desc"]
],
"sPaginationType": "full_numbers",
});
} );
使用columnDefs隐藏列
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false //不可通过第三列字段内容作为关键字来搜索
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );
垂直和水平滚动
//垂直滚动
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} ); //水平滚动
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true,
} );
} );
数字表达
$(document).ready(function() { //$433.060,00
$('#example').dataTable( {
"language": {
"decimal": ",",
"thousands": "."
}
} );
} );
语言选择
$(document).ready(function() {
$('#example').dataTable( {
"language": {
"sProcessing": "<img src='/images/datatable_loading.gif'> 努力加载数据中.",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sZeroRecords": "没有检索到数据",
"sSearch": "模糊查询: ",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
} );
} );
分页长度选择
$(document).ready(function() {
$('#example').dataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
多个表控制元件
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
} );
} );
//在表格首部和尾部均有iflp的信息,并且上下是同步的
自定义toolbar
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"toolbar">frtip'
} ); $("div.toolbar").html("<button class='btn btn-primary add_server'><span>添加物理机</span></button>");
$(".add_server").click(function(){
location.href ="/server/import"
})
} );
列渲染Column rendering
操纵一单元格的内容,这种技术可用于添加链接,基于内容的规则,需要指定颜色或任何其他形式的文本操作非常有用。
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{
"render": function ( data, type, row ) {
return data +' ('+ row[3]+')';
},
"targets": 0
},
{ "visible": false, "targets": [ 3 ] }
]
} );
} );
设置表的默认属性--Setting defaults
$.extend( $.fn.dataTable.defaults, {
"searching": false,
"ordering": false
} );
DOM / jQuery events
$(document).ready(function() {
$('#example').dataTable(); $('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
} );
} );
行回调
$(document).ready(function() {
$('#example').dataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
$('td', row).eq(5).addClass('highlight');
}
}, "rowCallback": function(row, data) {
// ip列添加链接
if(data.ip) {
$('td:eq(3)', row).html('<a target="_blank" href=http://' + data.ip + '>' + data.ip + '</a>');
}
}, } );
} );
前端常用功能记录(三)—datatables表格初始化的更多相关文章
- 前端常用功能记录(三)—datatables表格初始化(转)
数据源 我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行 ...
- 前端常用功能记录(二)—datatables表格(转)
前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...
- 前端常用功能记录(二)—datatables表格
并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...
- 转 My97日历控件常用功能记录
My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...
- 3.VUE前端框架学习记录三:Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- CentOS rpm常用功能记录
CentOS7主要有rpm和yum这两种包软件的管理.两者有功能上的区别,其中主要区别是:yum使用简单但需要联网,yum会去网上包源去获取所需要的软件包.而rpm的需要做的事情就更细一些,比如我们需 ...
- My97日历控件常用功能记录
My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...
- Hibernate 基础配置及常用功能(三)
本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...
- Git常用功能记录
1. git查看某个文件的修改历史 git log --pretty 然后使用下面的命令可列出文件的所有改动历史,注意,这里着眼于具体的一个文件,而不是git库,如果是库,那改动可多了去了- git ...
随机推荐
- powersheel远程连接方法操作
powersheel远程连接密码加密连接高级玩法 ConvertTo-SecureString 和 ConvertFrom-SecureString 命令都支持选项 -Key.在处理密码时通过使用 K ...
- Hadoop日记Day7---HDFS的WED端口
HDFS 对外提供了可供访问的http server,开放了很多端口,下面介绍常用的几个端口(http://hadoop:……). 一.50070 端口,查看NameNode 状态,如图1.1所示. ...
- windows系统中Dotnet core runtime 安装后,无法启动次程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll的解决方法
因为dotnet core runtime依赖vc++2015,如果系统未安装vc++2015则会报上面的错误 解决方案:先下载安装vc++2015再安装dotnet core runtime, vc ...
- 小知识点--crontab
前言 这两周学了很多东西,还把golang语言基本掌握了,收获还是挺多的.在做安全的过程中,有很多需要定时执行的任务,比如抓取主机数量,端口数据等,这都逃不开linux中的crontab命令,今天分享 ...
- ECC检验与纠错
引入ECC ECC:Error Checking and Correction,是一种差错检测和修正的算法. NAND闪存在生产和使用中都会有坏块产生,BBM就是坏块的管理机制.而生产坏块已经无法避免 ...
- WPF DataGrid列设置为TextBox控件的相关绑定
在wpf的DataGrid控件中,某一列的数据模板为TextBox控件的话,绑定Text="{Binding TxtSn, UpdateSourceTrigger=PropertyChang ...
- linux之awk基础
第一章 1.awk 简介 awk不仅仅时linux系统中的一个命令,而且是一种编程语言,可以用来处理数据和生成报告(excel).处理的数据可以是一个或多个文件,可以是来自标准输入,也可以通过管道获取 ...
- allegro 封装 (引脚编号修改)
1. 打开dra文件在find里面 off all 然后只点击text 2.点击需要更改的焊盘 3.菜单栏edit - text 4.弹出窗口修改即可
- 粒子群算法(PSO)算法解析(简略版)
粒子群算法(PSO) 1.粒子群算法(PSO)是一种基于群体的随机优化技术: 初始化为一组随机解,通过迭代搜寻最优解. PSO算法流程如图所示(此图是从PPT做好,复制过来的,有些模糊) 2.PSO模 ...
- App推荐 | Google Tasks
前不久,Google推出了一款移动任务管理应用Google Task,在使用2天后,写一下使用感受,并与Google同类产品Keep进行一个对比. 首先欣赏几张官方的App截图 然后来看一下官方的介绍 ...