[英]jQuery Datatables change value of a column based on condition
我有工作正常的數據表。 但是我想稍微調整一下。 如您所見,我有這種情況:
if ( data.status == 0 )
這意味着如果status
等於零,我將使文本顏色為紅色,否則為綠色。 但是我也想更改data.status
的文本,它是0
或1
。 如何使文本顯示為0( Pending
和1( Approved
。
<script>
$(document).ready(function(){
$('#LeaveList').DataTable({
processing: true,
serverSide: true,
ajax: 'leave-list',
"createdRow": function ( row, data, index ) {
if ( data.status == 0 ) {
$('td', row).eq(6).addClass('text-danger');
}
else
{
$('td', row).eq(6).addClass('text-success');
}
},
columns: [
{data: 'id', name: 'id'},
{data: 'employee_name', name: 'employee_name'},
{data: 'employee_id', name: 'employee_id'},
{data: 'from_date', name: 'from_date'},
{data: 'to_date', name: 'to_date'},
{data: 'leave_type', name: 'leave_type'},
// {data: 'department', name: 'department'},
{data: 'status', name: 'status'},
{data: 'created_at', name: 'created_at'},
{data: 'action', name: 'action', orderable: true, searchable: true}
]
});
});
</script>
我想在這個jQuery部分中而不是在數據查詢中做到這一點
您可以使用fnCreateCell來修改數據。
$(document).ready(function(){
$('#LeaveList').DataTable({
processing: true,
serverSide: true,
ajax: 'leave-list',
columns: [
{data: 'id', name: 'id'},
{data: 'employee_name', name: 'employee_name'},
{data: 'employee_id', name: 'employee_id'},
{data: 'from_date', name: 'from_date'},
{data: 'to_date', name: 'to_date'},
{data: 'leave_type', name: 'leave_type'},
// {data: 'department', name: 'department'},
{data: 'status', name: 'status',
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (sData) {
$(nTd).addClass('text-success');
}else{
$(nTd).addClass('text-danger');
}
}
},
{data: 'created_at', name: 'created_at'},
{data: 'action', name: 'action', orderable: true, searchable: true}
]
});
});
假設您當前的代碼運行正常。 然后,您只需要像這樣修改createdRow
部分:
...
createdRow: function ( row, data, index ) {
if ( data.status == 0 ) {
$('td', row).eq(6).addClass('text-danger').text('Pending');
} else {
$('td', row).eq(6).addClass('text-success').text('Approved');
}
},
...
但是,正如markpsmith指出的,更干凈的方法是使用render
選項。 您可以在此處閱讀有關columns.render
信息 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.