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


How can I change dynamically class of rows in jquery datables on basis on condition

我使用jquery DataTables和CodeIgniter来显示清单页面上的数据。我的问题是如何根据条件改变特定字段的类。

我有一个状态字段,如果状态是启用的,我想添加类,显示启用状态的图标。如果我禁用它,那么它将显示禁用状态的图标。

我不能更改类。

代码如下:

这个代码是在我的控制器函数中获取数据。

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); 

任何帮助都会很感激。谢谢。

你需要使用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()