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

Question

我想用 JQuery Datatable 库创建一个 Datatable，但是为了美化和 UI 原因，我想要一个图标根据另一个输入字段而改变。比方说，

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

Answer 1

您不会添加图标，您将添加 CSS Class，而在 CSS class 中，您将添加图像想要。

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

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 之后，您必须分别创建带有要操作的图标的 createdRow . 在 table 部分中，添加要为 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 = $('#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并且声明完成了工作。

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

两个 CSS class 看起来像这样

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 元素中的图标？

How to change an icon in a JQuery Datatables TD element, according to another TD element?

javascript

datatable

jquery

image-manipulation

datatables