如何根据另一个TD元素更改JQuery Datatables TD元素中的图标?
问题描述:
我想用JQuery Datatable库创建一个Datatable,但为了美化和UI的原因,我希望图标根据另一个输入字段进行更改。比方说,如何根据另一个TD元素更改JQuery Datatables TD元素中的图标?
If td.field 4 is null then td.field 5 icon=1 else icon=2.
答
你不会增加你要添加一个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你必须seperately创建你要操作的图标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;}
这是不是令人难以置信的美妙,但我花了几个小时,我想结果是用户不错的,很容易立即明白他在看什么。
答
"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也可以直接添加图标拖入数据表与
答
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');
}
}
您正在使用客户端的数据表或服务器上面代码的帮助之前,侧? –