如何根据条件动态更改 jquery 数据表中的行类答案

【问题标题】：How can I change dynamically class of rows in jquery datables on basis on condition如何根据条件动态更改 jquery 数据表中的行类
【发布时间】：2015-05-18 05:45:25
【问题描述】：

我正在使用带有 CodeIgniter 的 jquery DataTables 在列表页面上显示数据。我的问题是如何根据条件更改特定字段的类。

我有一个状态字段，如果状态已启用，我想添加显示启用状态图标的类。如果我禁用它，它会显示禁用状态的图标。

我无法更改课程。

这里是代码。

此代码在我的控制器函数中，用于获取数据。

function list_op_data() {
    $this->datatables->select('om.op_id,om.is_status,om.op_name,om.op_address1,om.op_address2,cm.stCity,sm.stState,co_m.stCountryName ,om.op_pincode,om.op_contact_name,om.op_email,om.op_phone_no', false);
    $this->datatables->join("country_master co_m", 'om.op_country=co_m.intCountryId');
    $this->datatables->join("state_master sm", 'om.op_state=sm.intStateId');
    $this->datatables->join("city_master cm", 'om.op_city=cm.intCityId');
    $this->datatables->from('op_master om');
    $this->datatables->where(array('om.is_deleted' => '0'));

    $this->datatables->add_column('action', '<a href="" class="activate_operator margin" ref="$1" data-status="$2"><i  class=" glyphicon glyphicon-ok"></i></a><a href=' . base_url() . 'admin/op_master_details/edit_operator?id=$1 class="edit_btn margin" ref="$1"><i  class="glyphicon glyphicon-pencil"></i> </a> <a href="javascript:void" class="del_operator" ref="$1"><i  class="glyphicon glyphicon-trash"></i> </a>', 'op_id,is_status');
    $data = $this->datatables->generate('json');
    echo $data;
}

而jquery数据表代码是

var tconfig = {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": BASE_URL+"admin/op_master_details/list_op_data",
        "type": "POST",
        "data": "json"
    },
    "columnDefs": [
    {
        "searchable": false
    }
    ],
    "iDisplayLength": 5,
    "aLengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
    "paginate": true,
    "paging": true,
    "searching": true,
    "aoColumnDefs": [
    {
        "targets": [0],
        "visible": false,
        "searchable": false

    },
    {"bSortable": false,  "aTargets": [12]},
     {
        "targets": [1],
        "visible": false,
        "searchable": false

    },
    ]
};
var oTable = $('#operator_list_data').dataTable(tconfig);

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： php jquery codeigniter datatables

【解决方案1】：

您需要使用fnRowCallback。将此添加到您的初始化代码中：

...
],
'fnRowCallback': function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   // Get the status form the row object       
   var status = aData[1];
   // check the status
   if(status == 'Yes'){
       // add the class to the <tr>
       $(nRow).addClass('glyphicon glyphicon-ok');
       }
   return nRow;
},
...

当 status = 'Yes' 时，这会将类 glyphicon glyphicon-ok 添加到 <tr>。如果要将类添加到不同的控件，则必须修改 addClass 语句以使用不同的选择器。例如$(nRow).children('td')[3]).find(i).addClass()

【讨论】：