Question

我想用JQuery Datatable库创建一个Datatable，但是出于美化和UI原因，我想要一个图标根据另一个输入字段进行更改。让我们说，

If td.field 4 is null then td.field 5 icon=1 else icon=2.

Answer 1

您不会添加要添加CSS类的图标，而在CSS类中，您将添加所需的图像。

假设您已经进行了ajax调用，并且您拥有JSON并且正在创建数据表。

table = $('#table').DataTable( {
    "columns": [

            { "className":'userName col-md-2', "data": "userName" },
            { "className":'desc col-md-2', "data": "desc" },
            { "className":'timeStart col-md-2', "data": "timeStart" },
            { "className":'timeEnd col-md-2', "data": "timeEnd" },
            { "className":'dispatcher col-md-2', "data": "dispatcher" },

            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },

        ],
        "order": [[2, 'desc']], !NOT FINISHED YET

在此之后立即 table.row.add 之前，你必须单独创建带有你想要操作的Icon的createdRow。在表格部分中，您可以添加要为createdRow创建的语句。

"createdRow": function ( row, data, index ) { if ( data.dispatcher == null ) { $('td', row).eq(5).addClass("edit-incident2"); }else{ $('td', row).eq(5).addClass("edit-incident"); } }

在此之后，您的代码看起来像下面的女巫是完全表代码。

table = $('#table ').DataTable( { "columns": [ { "className":'userName col-md-2', "data": "userName" }, { "className":'desc col-md-2', "data": "desc" }, { "className":'timeStart col-md-2', "data": "timeStart" }, { "className":'timeEnd col-md-2', "data": "timeEnd" }, { "className":'dispatcher col-md-2', "data": "dispatcher" }, { "className": 'edit', "orderable": false, "data": null, "defaultContent": '' }, ], "order": [[2, 'desc']], "createdRow": function ( row, data, index ) { if ( data.dispatcher == null ) { //console.log(data.dispatcher); $('td', row).eq(5).addClass("edit-incident2"); }else{ $('td', row).eq(5).addClass("edit-incident"); } } } );

然后你绘制你的表格并且该语句可以完成这项工作。

table.row.add( { "userName": responsejson.userName, "desc": responsejson.desc, "timeStart": responsejson.timeStart, "timeEnd": responsejson.timeEnd, "dispatcher": responsejson.dispatcher, "_id": responsejson._id, } ).draw();

两个CSS类看起来像这样

td.edit-incident { background: url('../img/incident_management.png') no-repeat center center; cursor: pointer;} td.edit-incident2 { background: url('../img/incident_management2.png') no-repeat center center; cursor: pointer;}

这不是一件令人难以置信的奇妙事情，但它花了我几个小时，我认为结果很好，很容易让用户立即明白他在看什么。

Answer 2

"columns": [
{
"className": 'details-control', "orderable": false, "data": null,"defaultContent": '', "render": function (data, type, row) {
     if(data.id==1)
          return '<span class="glyphicon glyphicon-remove"></span>';
     else
     return '<span class="glyphicon glyphicon-ok"></span>';
    },
}
]

只需在render.it之前修改列值，也可以借助上面的代码直接将图标添加到数据表中

Answer 3

giv ids for each row  and tds 

     <tr id="1"> 
              <td id="1"></td> 
              <td id="2"></td> 
              <td id="3"></td>
    </tr>

 if you creating <td> dynamically using the database

     for(i=0;i<upto number of tds in a row;i++)
    {   
       if($('#'+i).text()!='')//find td is null or not
       {            
          $('#'+i).append('if');
       }
      else
       {    
          $('#'+i).append('else');
       }
    }

如何根据另一个TD元素更改JQuery Datatables TD元素中的图标？

3 个答案: