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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM