html:

            <table id="table8" cellpadding="0" cellspacing="0" border="0" class="hover">
<thead>
<tr>
<th> Ticker </th>
<th> Company </th>
<th> Industry </th>
<th> Market Cap(MM) </th>
<th> Price</th>
<th> Yield </th>
<th class="lastReport"> Last Report Date </th>
<th class="nextReport"> Next Report Date </th>
<th> Days After Last Earning</th>
<th> Days Before Next Earning</th>
<th> Perform </th>
<th> Perform-1 </th>
</tr>
</thead>
</table>

js:

      //初始化表格:
      $('#table8').DataTable( {
"ajax": "User/showStock",
            //创建行回调,根据td的内容给td添加样式
"createdRow":function(row,data,index){
addClassName(data.rank_cur_fs,10,row);
addClassName(data.rank_fs_1,11,row);
$('td',row).eq(0).html('').append('<a href="stock/detail?code='+data.code+'&company='+data.company+'" target="_blank">'+data.code+'</a>');
},
"columns": [
{ "data": "code" },
{ "data": "company" },
{ "data": "section" },
{ "data": "market_value" },
{ "data": "price" },
{ "data": "div" },
{ "data": "last_report_date" },
{ "data": "next_report_date" },
{ "data": "days_after_last_earning" },
{ "data": "days_before_next_earning" },
{ "data": "rank_cur_fs" },
{ "data": "rank_fs_1" }
],
"aLengthMenu": [[10, 20, 50, 100, -1], ["10", "20", "50","100", "All"]],//第一组数量,第二组说明文字
columnDefs:[{
     type: 'natural', targets: 0,
   },{
    'targets' : [1],//第一列不排序
    'orderable' : false
   },{
//设置不参与搜索
"targets":[3,4,5,6,7,8,9,10,11],
"searchable":false
}]
});
//addClassName函数
function addClassName(data,i,row){
switch(data){
case 'Sell':
$('td',row).eq(i).attr('class','Sell');
break;
case 'Buy':
$('td',row).eq(i).attr('class','Buy');
break;
case 'Hold':
$('td',row).eq(i).attr('class','Hold');
break;
case 'Marketperform':
$('td',row).eq(i).attr('class','Marketperform');
break;
case 'Outperform':
$('td',row).eq(i).attr('class','Outperform');
break;
case 'Underperform':
$('td',row).eq(i).attr('class','Underperform');
break;
default:
break;
}
}

资料:创建行回调

【注意】console.log(data.rank_fs-1);结果:NaN;如果改为console.log(data.rank_fs_1);就能打印出来了。

datatables通过ajax调用渲染数据,怎么根据数据给td添加class的更多相关文章

  1. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  2. DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  3. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  4. Ajax——ajax调用数据总结

    在做人事系统加入批量改动的功能中,须要将前台中的数据传给后台.后台并运行一系列的操作. 通过查询和学习了解到能够通过ajax将值传入到后台,并在后台对数据进行操作. 说的简单点.就是ajax调用后台的 ...

  5. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三(MySQL) Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  6. Aspx Ajax 调用 C#函数处理数据

    jquery ajax 调用后台函数 var res; $.ajax({ type: "POST", url: "fast_index_overview.aspx/Get ...

  7. 使用HBuilder开发移动APP:ajax调用接口数据

    既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...

  8. ajax调用数据案例,二级联动

    题目:请针对移动端web浏览器制作一个结账数据信息展示页面 要求: 1. 页面样式除不使用表格呈现外,可自由选择其他呈现方式 2. 需符合移动端操作习惯 3. 可根据服务区.门店查询结账信息 4. 可 ...

  9. asp.net mvc 使用Ajax调用Action 返回数据【转】

      使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src=& ...

随机推荐

  1. Linux系统的安装(centos的下载地址:http://mirror.symnds.com/distributions/CentOS-vault/6.3/isos/i386/,选择:CentOS-6.3-i386-bin-DVD1.iso 这个下载并进行安装)

    1.首先打开虚拟机: 在上面的那个按钮旁有一个下拉的符号,点开后会看到一个进入固件的按钮,直接点击进去. 便会进入这个界面: 在这个界面其实我们不需要该任何的东西,但是我们需要进入boot界面看一眼, ...

  2. Linux_oracle命令大全(转)

    Linux_oracle命令大全 一,启动 1.#su - oracle              切换到oracle用户且切换到它的环境 2.$lsnrctl status           查看 ...

  3. webService(简单小demo)

    1.什么是webService? 1.1.先说好处: WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. WebSer ...

  4. cocos2d-x坐标系详解

    cocos2d-x官方文档 笛卡尔坐标系 不同坐标系简介 笛卡尔坐标系 你可能上学的时候就已经知道“笛卡尔坐标系”了,它在几何课本里经常用到.如果你已经忘得差不多了,下面这些图片可以很快唤起你的记忆: ...

  5. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at:

    今天更新了一下mac系统,然后发现  idea的svn插件不能用了,有的报 有的报  is not under version 经查找需要做如下处理,打开终端,安装xcode: xcode-selec ...

  6. 面试题:struts 值栈 有用

    一. 核心部分 1. [核心试题]完成当天课堂练习 2. [多选题] 阅读如下代码中,下列哪种方式可以在页面正确迭代获取集合中的数据 (ABC) public String add(){ ValueS ...

  7. 华为JAVA机试流程

    1.JAVA机试流程:①打开IE浏览器,输入机试系统IP地址(以当天告知的地址为准):②输入姓名.手机,选择“C/C++”或“JAVA”,登录:③登录后显示题目,阅读题目并点击页面最下方的“下载框架文 ...

  8. p2197 nim游戏

    传送门 分析 我们知道最后取完的情况就是所有的a[i]异或和为0 所以只要开始的异或和不为0则先手一定可以将它转化为0 否则不行 所以如果异或和非0则先手胜 代码 #include<bits/s ...

  9. swing重绘按钮为任意形状图案的方法

    swing重绘按钮为任意形状图案的方法 摘自https://www.jb51.net/article/131290.htm 转载  更新时间:2017年12月22日 13:43:00   作者:_Th ...

  10. TCP/IP的三次握手和四次放手

    一开始个人对于三次握手和四次挥手这个东西还是有时候会忘记,可能理解的不是非常深刻,所以今天就自己动手来记录一下这个知识点,方便以后查看.总结完之后发现总结的还是可以的哈哈. 三次握手建立连接 第一次: ...