• datatables通过ajax调用渲染数据,怎么根据数据给td添加class


    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);就能打印出来了。

  • 相关阅读:
    学习ObjectC,GUNstep安装在windows上
    Why std::binary_search of std::list works, sorta ...(转载)
    android开发_Button控件
    Android开发模拟器的使用02
    Android开发环境搭建01
    android开发TextView控件学习
    Java 利用poi把数据库中数据导入Excel
    Cannot create PoolableConnectionFactory (Communications link failure)Connection refused: connect
    Android开发第一个程序Helloworld
    java的poi技术读取和导入Excel
  • 原文地址:https://www.cnblogs.com/rachelch/p/7607473.html
Copyright © 2020-2023  润新知