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

posted @ 2017-09-28 16:55  rachelch  阅读(4111)  评论(0编辑  收藏  举报