【DataTable】单行渲染特殊样式小结

最新推荐文章于 2022-05-02 11:32:37 发布
最新推荐文章于 2022-05-02 11:32:37 发布
阅读量1.8k 收藏 6
点赞数 1
分类专栏： projects 文章标签： datatable 单行渲染格式 单元格渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coralime/article/details/89578767
版权

【背景描述】

制作一个排行榜，想要突出显示前123名，并依次标识【冠军】、【亚军】、【季军】。

有以下几种方式实现：

#1-> 调用每行的回调函数 fnCreatedRow: function (nRow, aData, iDataIndex)

#2-> 调用每个单元格的回调函数 createdCell: function(nTd, sData, oData, iRow, iCol)

#3-> 排序、搜索等触发表格重新渲染 + 实现单个单元格的格式渲染

#4-> 使用datatable API row()实现

DataTable API：http://www.datatables.club/reference/api/

【具体说明】

#1-> 回调函数 fnCreatedRow: function (nRow, aData, iDataIndex)

--> nRow:  当前已经被创建的tr元素对象，即DOM

--> aData: 当前行的对象，类似一个array，通过aData.keyValue 可以取到对应的字段值

--> iDataIndex: 当前行数，内部存储索引值

参考资料：http://datatables.club/reference/option/createdRow.html

$("#example").DataTable({
    
    //每行回调函数，给123行设置特殊标识
    "fnCreatedRow": function (nRow, aData, iDataIndex) {
        
        //当前第1行，下标从0开始计数    
        if(iDataIndex == 0){
            $(nRow).css("background-color", "#e46262"); //设置背景色
            $(nRow).css("font-weight","bold"); //设置字体加粗
            $(nRow).css("color","#ffffff"); //设置字体颜色
            //取第0列当前行的单元格，设置一个图标加文字
            $('td:eq(0)',nRow).html("<image src='pic/Trophy_gold.png'> 冠军");
        }
        else if(iDataIndex == 1){
            $(nRow).css("background-color", "#ffb456");
            $(nRow).css("font-weight","bold");
            $(nRow).css("color","#ffffcc");
            $('td:eq(0)',nRow).html("<image src='pic/Trophy_silver.png'> 亚军");
        }
        else if(iDataIndex == 2){
            $(nRow).css("background-color", "#FFFF00");
            $(nRow).css("font-weight","bold");
            $(nRow).css("color","#8d9ab9");
            $('td:eq(0)',nRow).html("<image src='pic/Trophy_bronze.png'> 季军");
        }
        //其他行正常显示
        else
            $('td:eq(0)',nRow).html(iDataIndex+1);
    }
});

实现效果：左图依照第4列进行排序结果，排序后每行记录会进行移动，包括第1列的排名序号。

适用于不需要动态排序的场景。

          

tips：最开始写成了  $('td:eq(0)',nRow).innerText = iDataIndex+1;

程序无法识别这段代码，换成innerHtml也一样，关于它们之间的区别可以参考： 

https://www.cnblogs.com/fozero/p/5916878.html

#2-> 调用回调函数 createdCell: function(nTd, sData, oData, iRow, iCol)

顾名思义，这个函数是在创建单元格的时候回调的，参数设置如下：

--> nTd : 当前单元格DOM对象

-->sData : 当前单元格的具体数值

-->oData : 当前整行的数据对象

--> iRow : 行下标

--> iCol : 列下标

tips :  只能单个单元格进行渲染，一般都是取用的$(nTd)对象进行相应的操作。

oData.key 等价于 sData，即对第一列“排名”来说，oData.排名 = sData

$("#example").DataTable({
    "data": dataArray.BodyData,
    "columns":[
        {
            "data": "排名",
            //单元格渲染格式
            createdCell: function (nTd, sData, oData, iRow, iCol) {
                if(iRow == 0)
                    {
                        $(nTd).css("background-color", "#e46262");
                        $(nTd).css("font-weight","bold");
                        $(nTd).css("color","#ffffff");
                        $(nTd).html("<image src='pic/Trophy_gold.png'> 冠军");
                    }
                else if(iRow == 1){
                        $(nTd).css("background-color", "#ffb456");
                        $(nTd).css("font-weight","bold");
                        $(nTd).css("color","#ffffcc");
                        $(nTd).html("<image src='pic/Trophy_silver.png'> 亚军");
                }
                else if(iRow == 2){
                        $(nTd).css("background-color", "#FFFF00");
                        $(nTd).css("font-weight","bold");
                        $(nTd).css("color","#8d9ab9");
                        $(nTd).html("<image src='pic/Trophy_bronze.png'> 季军");
                }
                else{
                        $(nTd).html(iRow+1) ;
                }
            }
        },
        {
            "data": "姓名",
            createdCell: function (nTd, sData, oData, iRow, iCol) {
                if(iRow == 0)
                {
                        $(nTd).css("background-color", "#e46262");
                }
                else if(iRow == 1){
                        $(nTd).css("background-color", "#ffb456");
                }
                else if(iRow == 2){
                        $(nTd).css("background-color", "#FFFF00");
                }
             }
        },
        {
            "data": "地区",
            //单元格渲染
            createdCell: function (nTd, sData, oData, iRow, iCol) {
                if(iRow == 0)
                {
                        $(nTd).css("background-color", "#e46262");
                }
                else if(iRow == 1){
                        $(nTd).css("background-color", "#ffb456");
                }
                else if(iRow == 2){
                        $(nTd).css("background-color", "#FFFF00");
                }
            }
        },
        {
            "data": "排序数",
            createdCell: function (nTd, sData, oData, iRow, iCol) {
                if(iRow == 0)
                {
                        $(nTd).css("background-color", "#e46262");
                }
                else if(iRow == 1){
                        $(nTd).css("background-color", "#ffb456");
                }
                else if(iRow == 2){
                        $(nTd).css("background-color", "#FFFF00");
                }
            }
        }
    ]        
});

实现效果同上。 

datatable的各种回调函数：https://www.cnblogs.com/lxny/p/6203661.html

-----------------------#小结#-----------------------

fnCreatedRow 和 createdCell 的用法类似，一个是针对整行的，一个是针对单个单元格的，在fnCreatedRow调用过程中，如果需要取单个单元格可以用 $('td:eq(0)',nRow) ，其中0代表第0列，另外样式设置采用.css()，文本设置采用.html()。

#3-> 排序、搜索等触发表格重新渲染 + 实现单个单元格的格式渲染

1. 要求按某一列排序的时候，前三行固定不变，即每次排序时会重新渲染单元格格式，而不会导致记录跟着一起移动。

2. 可以自定义渲染每个单元格的格式，包括背景、字体大小、颜色、加粗等属性，起强调突显作用。

适用场景：需要依据不同的列条件(column)取前几位，并突出显示。

var t = $("#example").DataTable();
t.on('order.dt search.dt',function () {
                            
    //-------第1列--------
    t.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
        //保存默认单元格格式风格
        var cellStyle = cell.style;
        if(i==0){
            cell.innerHTML = "<image src='pic/Trophy_gold.png'> 冠军";
            cell.style.backgroundColor = "#e46262";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bold";
        }
        else if(i==1){
            cell.innerHTML = "<image src='pic/Trophy_silver.png'> 亚军";
            cell.style.backgroundColor = "#ffb456";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bold";
        }
        else if(i==2){
            cell.innerHTML = "<image src='pic/Trophy_bronze.png'> 季军";
            cell.style.backgroundColor = "#FFFF00";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bold";
        }
        else {
            cell.innerHTML = i + 1;
            //设置单元格为默认的风格
            cell.style = cellStyle;
        }
    });
    //-------第2列--------
    t.column(1,{search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
        //保存默认单元格格式风格
        var cellStyle = cell.style;
        if(i==0){
            cell.style.backgroundColor = "#ff6262";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bold";
        }
        else if(i==1){
            cell.style.backgroundColor = "#ffb49a";
            cell.style.color = "#ffffcc";
            cell.style.fontWeight = "bold";
        }
        else if(i==2){
            cell.style.backgroundColor = "#FFFFa9";
            cell.style.color = "#8d9ab9";
            cell.style.fontWeight = "bold";
        }
        else{
            //设置单元格为默认的风格
            cell.style = cellStyle;
        }
    });
    //-------第3列--------
    t.column(2, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
        //保存默认单元格格式风格
        var cellStyle = cell.style;
        if(i==0){
            cell.style.backgroundColor = "#e1ed99";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bold";
        }
        else if(i==1){
            cell.style.backgroundColor = "#dd5579";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bolder";
        }
        else if(i==2){
            cell.style.backgroundColor = "#abbb37";
            cell.style.color = "#FFFFFF";
            cell.style.fontWeight = "bolder";
        }
        else{
            //设置单元格为默认的风格
            cell.style = cellStyle;
        }
    });
}).draw();

输出效果：左图是依据第4列的数值从高到低排列，右图是从低到高排列后的结果。

          

tips：重新渲染的时候记得先保存默认单元格的风格，重绘的时候记得设置成默认风格，不然会出现以下情况。

代码放在ajax-complete function(){} 里面，即当数据加载完成的时候调用重绘函数。

#4-> 使用datatable API row() 实现

4.1 点击单行，打印输出当前JSONObject

var table = $("#example").DataTable();
$('#examplet body').on('click','tr',function () {
    console.log(table.row(this).data());
});

4.2 点击单个单元格，打印输出当前单元格信息

var table = $("#example").DataTable();
$('#example tbody').on('click','td',function () {
    console.log(table.cell(this).data());
});

 4.3 设置特定一行的样式

官方例子：https://datatables.net/reference/api/row().data()

参考：https://zhidao.baidu.com/question/198931344022248125.html

初始想法：借用row.id()判定是否需要特殊渲染某一行，结果输出的是undefined，正常情况下会返回当前rowid，原因是没有设置id值，所以应该使用的是 row.index() 来返回当前的rowindex。

ex. 点击当前行，返回rowindex 

var table = $('#example').DataTable();
$('#example').on( 'click', 'tr', function () {
    var index = table.row( this ).index();
    alert( 'Clicked row index '+index );
});

ex. 根据index，分别点击前3行，改变该行的背景色，任意一行点击后，第一列单元格的值会变成“updated”。

var table = $('#example').DataTable();
$('#example').on('click', 'tr', function () {
    var index = table.row( this ).index();
    table.cell(index, 0).data('updated').draw();
    if(index == 0){
        $(this).css("background-color", "#e46262");
    }
    if(index == 1){
        $(this).css("background-color", "#ffb456");
    }
    if(index == 2){
        $(this).css("background-color", "#FFFF00");
    }
});

回到最开始的问题，前三行特殊渲染背景+字体加粗，第一列加图标突显主题。

下面两种写法完全等价，方式其实和第一种方式很相似，都是取到需要的那一行，然后对行进行操作，之后通过$('td: eq(0)', this) 取这一行的某一列进行单独渲染。

tips: 代码段放置在 ajax complete: function () { } 里面。

var tr = $('#example tr');
tr.each(function () {
    var index = $(this).index();
    if(index == 0){
        $(this).css("background-color", "#e46262");
        $(this).css("font-weight","bold");
        $(this).css("color","#ffffff");
        $('td:eq(0)',this).html("<image src='pic/Trophy_gold.png'> 冠军");
        console.log(this);
    }
    else if(index == 1){
        $(this).css("background-color", "#ffb456");
        $(this).css("font-weight","bold");
        $(this).css("color","#ffffcc");
        $('td:eq(0)',this).html("<image src='pic/Trophy_silver.png'> 亚军");
        console.log(this);
    }
    else if(index == 2){
        $(this).css("background-color", "#FFFF00");
        $(this).css("font-weight","bold");
        $(this).css("color","#8d9ab9");
        $('td:eq(0)',this).html("<image src='pic/Trophy_bronze.png'> 季军");
        console.log(this);
    }
    else{
        $('td:eq(0)',this).html(index + 1);
    }
});

//等价写法
var tr = $('#example tr');
tr.each(function () {
    var row = $(this);
    var index = row.index();
    if(index == 0){
        row.css("background-color", "#e46262");
        row.css("font-weight","bold");
        row.css("color","#ffffff");
        $('td:eq(0)',row).html("<image src='pic/Trophy_gold.png'> 冠军");
        console.log(this);
    }
    else if(index == 1){
        row.css("background-color", "#ffb456");
        row.css("font-weight","bold");
        row.css("color","#ffffcc");
        $('td:eq(0)',row).html("<image src='pic/Trophy_silver.png'> 亚军");
        console.log(this);
    }
    else if(index == 2){
        row.css("background-color", "#FFFF00");
        row.css("font-weight","bold");
        row.css("color","#8d9ab9");
        $('td:eq(0)',row).html("<image src='pic/Trophy_bronze.png'> 季军");
        console.log(this);
    }
    else{
        $('td:eq(0)',this).html(index + 1);
    }
});

实现效果：

    

 

 

 

 

 

爱吃香草冰淇淋的阿喵
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsf2.0 dataTable单行修改例子
12-18
这个例子展示了如何实现一个具有单行编辑功能的`dataTable`，让用户能够直接在表格中编辑数据并保存更改。下面我们将深入探讨JSF 2.0 `dataTable`的使用以及实现单行修改的具体步骤。 首先，`dataTable`是基于Java...
使用DataTable.Select 方法时,特殊字符的转义方法分享
10-26
本文将深入探讨如何在使用`DataTable.Select`方法时对特殊字符进行转义，确保查询语句的正确性。 `DataTable.Select`方法通常接收一个字符串表达式作为参数，这个表达式用于定义筛选条件。例如，如果我们有一个`...
dataTables行渲染
weixin_33976072的博客
04-20 87
<script type="text/javascript">$(document).ready(function(){$('#example').DataTable( { "processing": true, "serverSide": true, 'ajax': { url: 'serv...
jQuery dataTables 的使用
xqqing79的专栏
10-28 888
  jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。 首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库， 目前最新的版本是 1....
jquery datatables api （转）
c692088846的专栏
10-23 525
学习可参考：http://www.guoxk.com/node/jquery-datatables                       http://yuemeiqing2008-163-com.iteye.com/blog/2006942   1:导入包：     URL：http://www.datatables.net/    分别导入css和js文件 &lt;sty...
DataTable比较当前行和下行是否一致 DataTable复制结构和复制数据
diehe5608的博客
10-09 117
DataView dvNeed = dtView.DefaultView; dvNeed.Sort = "EMPLOYEEID"; //排序用于下面当前行和下行比较 一般用来添加一行汇总行 DataTable dtNeed = dvNeed.ToTable(); //排序后的DataTable DataTable dtFinally = dtNeed.Clone(); //复制d...
datatable中的行和列操作
以梦为马 不负韶华
09-20 3388
1.无论是添加行还是添加列，都是先创建行对象或列对象，在创建的同时设置可以设置行或列的属性。 2.创建完行或列对象后，需调用行和列的add()方法将值添加到表中； 3.最后将表添加到dataset中 4.注意writeline是带换行的 namespace CreateDataSetAndDataTable { class Program { static...
数据库开发总结(ADO.NET小结)
01-20
一．用SqlConnection连接SQL Server 1..加入命名空间 using System.Data.SqlClient; 2.连接数据库 SqlConnection myConnection = new SqlConnection(); myConnection.ConnectionString = “user id=sa;...
C#中DataGridView常用操作实例小结
01-20
DataTable tableType = DataBase.SQLDBHelper.GetDataTable(select top 200 unit_code,unit_name from unit ); DataTable table = DataBase.SQLDBHelper.GetDataTable(select top 2 * from TempProduct); ...
layui中的table 单独渲染某一行
baoyc
06-12 1143
在用layui中的table渲染table时,有一个done函数可以单独渲染某一行 done:function(res,curr,count){ var that = this.elem.next(); for(let i in res.data){ let ID= res.data[i] if(ID.字段名满足何种条件){ let tr = that.find(".layui-table-box tbody tr[data-
【日常笔记】datatables表格数据渲染
weixin_30279751的博客
05-20 458
现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据 使用datatables可以更方便的来渲染数据 【中文api】http://datatables.club/index.html 在datatables中获取后台自定义的键值对： initComplete: function (settings,data) { // settings中有个json属性 可...
datatable 局部刷新之单元
whyrookie的博客
08-01 472
需求： 　　1.对某一列进行动态更新。 2.不能对表格状态更改，如选中状态、当前页数、筛选等。 这样我们使用 draw 、ajax.reload 等都不能满足第二个需求。幸好发现一个api cell().data() 可以实现上面的需求。对此进行了封装来满足需求。 解决： $.fn.dataTable.Api.register( 'partUpdate', function (col) { var api = this; var Sdata = api.da...
jquery DataTables动态更新某一行某一列的值、添加和删除行、根据数据决定动态隐藏列，通过下拉列表选择显示和隐藏列
sxj的专栏
10-20 5665
1、首先定义一个DataTable对象，如下代码： var datas = $('#datas').DataTable({ buttons: [ { extend: 'print', className: 'btn dark btn-outline',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }}, { extend: 'copy', className: 'btn
datatable参数和服务端ajax函数配置及说明
热门推荐
shya_的博客
02-17 1万+
上周因为需要使用了datatable，可是网上搜索到的要么就是一点点的参数介绍，要么就是几个回调函数的介绍，极少数有比较全面的，所以把自己用到的总结了一下，这其中涉及到服务端的分页，其实datatable都给我们集成好了，用起来是很方便的，话不多说，如下： 关于datatable使用详解： 1、基本参数配置： 要注意的是，要被dataTable处理的table对象，必须有
jquery datatable.js学习笔记
MelodyFreedom的博客
11-18 898
DataTable学习笔记--基础函数变量   　　  DataTable下有四个命名空间（namespace），分别是defaults，ext,models,oApi。         Defaults：主要是用于初始化表格的一些选项。         Ext：extension object，提供额外的表格选项         Models：类模型容器，Th
dataTable使用
PresByter的博客
10-18 327
官网——-DataTable英文网址 ——-DataTables中文网址 ——-DataTables一些例子本文主要是围绕下面的例子进行讲解的，请看效果图 说明： 全选功能，点击删除，批量删除，批量添加等等功能都可以实现。 下载的位置DataTables经典案例 使用方法1.首先引入jQuery和DataTablesjs 2.在html里面建一个table<table class="
给 element ui 表格的表头添加图标
WEB___的博客
05-02 3113
使用 slot="header" 插槽即可。 相关代码： <el-table-column prop="total" label="" show-overflow-tooltip> <template slot="header"> 订单总额 <el-tooltip class="item" effect="dark" content="供应商已进货和已退货的总额" placement="bottom">-
datatable行内容增多时，收缩行（展示【更多】或者【收起】）
会飞的猪0629
01-22 8226
datatable行内容增多时，收缩行（展示【更多】或者【收起】） 前言：我们在使用datatables时，可能会遇到单元格内内容太多无法展示完全，省略号的方法使我们看不到全部的内容，已经不能满足我们的需求。想要在单元格内有个按钮【更多】，点击后该单元格的内容完全展示出来，点击【收起】后单元格又恢复原状，不影响排版。 完全展示： 部分展示： 贴上代码： html lan
datatable按钮大小
最新发布
05-26
你可以使用以下 CSS 代码来更改 DataTable 中按钮的大小： ```css .dataTables_wrapper .btn { font-size: 14px; padding: 6px 12px; } ``` 这会将按钮的字体大小设置为 14 像素，同时将上下填充设置为 6 像素，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值