I have this boolean data of 1 = 'Active' and 0 = 'Inactive'.
I successfully rendered it to the datatable, but the problem if I trying to search 'Active' or 'Inactive' it shows No matching records found.
Is there any solution for this problem?
Here is my datatable js code
columns: [
{ data: 'photo', name: 'photo' },
{ data: 'full_name', name: 'full_name' },
{ data: 'm_lname', name: 'm_lname'},
{ data: 'm_fname', name: 'm_fname'},
{ data: 'm_mname', name: 'm_mname'},
{ data: 'm_gender', name: 'm_gender' },
{ data: 'm_datebaptized', name: 'm_datebaptized' },
{ data: 'm_isactive', name: 'm_isactive',
render: function ( data, type, full, meta ) {
return data ? "Active" : "Inactive" ;
}
},
{ data: 'action', name: 'action' },
],columnDefs: [
{ targets: [2,3,4], visible: false},
{ targets: '_all', visible: true },
{ searchable: true, targets: '_all'},
{ searchable: false, targets: [0,8]},
{ orderData: 2, targets: 1 },
],
Thank you.
try to move mapping to
return datatables()->of(User::all()->map(function ($item) {
$item->m_isactive = $item->m_isactive ? 'Active' : 'Inactive';
return $item;
})->toJson();
and delete
render: function ( data, type, full, meta ) {
return data ? "Active" : "Inactive" ;
}
Related
i'm using datatable library and trying to get the entire row as object where checkbox "editado" is checked
I'm using the folowing code:
var a = $('#ContratoAlertaTabela').DataTable().rows(function (idx,
data, node) {
return $(node).find('.editado:input[type="checkbox"]').prop('checked');
}).data().toArray();
But it gives as object like:
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
But i'm looking for this
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
editado: true
And this is my datatable
var l = abp.localization.getResource('Contabilidade');
var dataTable = $('#ContratoAlertaTabela').DataTable(
abp.libs.datatables.normalizeConfiguration({
serverSide: true,
paging: true,
'order': [[2, 'asc']],
//order: false, //[[0, "asc"]],
searching: true,
scrollX: true,
ajax: abp.libs.datatables.createAjax(gcaspp.contabilidade.contratoAlerta.contratoAlerta.getListAlerta,
() => {
var visto = $("#ExibirVisto").is(":checked") ? "" : "true";
return { visto: visto };
}),
dom: '<"toolbar">',
columnDefs: [
{
title: 'Visto',
data: "visto",
orderable: false,
render: function (data) {
if (data) {
return '<input type="checkbox" name="cbox1" value="" checked>';
} else {
return '<input type="checkbox" name="cbox1" value="" >';
}
}
},
{
title: 'Editado',
render: function (data) {
return '<input type="checkbox" class="editado" name="teste" value="" >';
}
},
{
title: "visto",
data: "visto"
},
{
title: "id",
data: "id"
},
{
title: 'Tipo',
data: "tipo"
},
{
title: 'Numero',
data: "numero"
},
{
title: 'Exercicio',
data: "exercicio"
},
{
title: 'Descricao',
data: "descricao"
},
{
title: 'Fornecedor',
data: "fornecedor"
},
{
title: 'DataAssinatura',
data: "dataAssinatura"
},
{
title: 'DataTermino',
data: "dataTermino"
},
{
title: 'DiasRestantes',
data: "diasRestantes"
}
]
})
);
Any ideia about what i can do?
I created table with ant design ProTable Component and its Edit function is not working. It showing error like this. ("Cannot read properties of undefined (reading 'toString')"). I tried many ways to solve this problem and cannot found a solution yet.
I want get table data from CSV file upload. That function is already working and data retrieved to the table.
const columns = [
{
title: 'First Name',
valueType: 'string',
typeof:'string',
dataIndex: 'fName',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Last Name',
valueType: 'string',
typeof:'string',
dataIndex: 'lName',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Email',
valueType: 'string',
typeof:'string',
dataIndex: 'email',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Position',
valueType: 'string',
typeof:'string',
dataIndex: 'position',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Actions',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
<a
key="delete"
onClick={() => {
setData(data.filter((item) => item.id !== record.id));
}}
>
Delete
</a>,
<a
key="editable"
onClick={() => {
var _a;
(_a = action === null || action === void 0 ? void 0 : action.startEditable) === null ||
_a === void 0
? void 0
: _a.call(action, record.id);
}}
>
Edit
</a>,
],
},
];
EditableProTable
rowKey="id"
actionRef={actionRef}
headerTitle=""
maxLength={5}
recordCreatorProps={false}
columns={columns}
request={async () => ({
data: data,
total: 3,
success: true,
})}
value={csvArray}
onChange={setCsvArray}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
await waitTime(2000);
},
onChange: setEditableRowKeys,
actionRender: (row, config, defaultDom) => [
defaultDom.save,
defaultDom.delete || defaultDom.cancel,
],
}}
/>[![enter image description here][1]][1]
The editableKeys array contains rows that are in the editing state
const [editableKeys, setEditableRowKeys] = useState(() => csvArray.map((item) => item.index)); // or .map((item=) => item.key));
'{overdue}' , overdue is boolean type, how can I write some logic { here ... } ? something like this {overdue ? "yes":"no"} , but it doesnt work
Ext.application({
name : 'SwarmXTemplateExample2',
launch : function() {
Ext.create('Ext.dataview.List', {
fullscreen: true,
data: [
{ isDog: true, name: 'spot' },
{ isDog: false, name: 'jasper' },
{ isDog: true, name: 'gram' },
{ isDog: false, name: 'alex' },
{ isDog: false, name: 'snowball' }
],
itemTpl: Ext.create('Ext.XTemplate',
'<tpl if="values.isDog">Yes <tpl else> No </tpl>',
{
doNameCasing: function (name) {
return name.charAt(0).toUpperCase() + name.substr(1).toLowerCase();
}
}
)
})
}
});
I want to check the status which is come from a model in the form 0 and 1 but I have to show 0 as a enable and 1 as a disable but don't know how to use if below code
#push('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#role-table').DataTable({
serverSide: true,
processing: true,
responsive: true,
ajax: '{{ route("admin.role.getRoleList") }}',
columns: [
{ data: 'id', name: 'id',className:'text-center' },
{ data: 'name', name: 'name' },
{ data: 'status', name: 'status' },
{ data: 'action', name: 'action', classrole: 'text-center', orderable: false }
],
stateSave: true
});
});
</script>
#endpush
For formatting your status column, use this:
{
data: 'status',
name: 'status',
render: function ( data, type, row ) {
return data?$'<span> disable </span>':'<span> enable </span>';
}
}
Note that you have the power to use HTML tags for formatting your data columns.
For more information visit DataTable Renders
Write your yajra datatables query like this:
return datatables()->of($model)
->editColumn('status', function ($query) {
if($query->status == 0)
{
return 'enable';
}
else
{
return 'disable';
}
})
->escapeColumns([])
->make(true);
I am using Datatables to display a table and I am pulling a list of datestimes from a MySQL database. These date times are not standard dates and look like this:
12/30/19 # 04:17 pm
How can I sort these accurately with Datatables?
Here is my code:
getRes(function (result) { // APPLIED CALLBACK
$('#resdatatable').DataTable({
data: result, // YOUR RESULT
order: [[ 0, "desc" ]],
autoWidth: false,
responsive: true,
columns: [
{ data: 'id', title: 'ID' },
{ data: 'bookingdatetime', title: 'Booking Date' },
{ data: 'name', title: 'Name' },
{ data: 'class', title: 'Class' },
{ data: 'pickupdatetime', title: 'Pick up' },
{ data: 'duration', title: 'Duration' },
{ data: 'dropdatetime', title: 'Drop off' },
{ data: 'age', title: 'Age' },
{ data: 'coverage', title: 'Coverage' },
{ data: 'quote', title: 'Quote' },
{
data: 'status',
title: 'Status',
render: function(data, type, row) {
let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
if (isKnown) {
return $('<select id="resstatus'+row.id+'" onchange="changeResStatus('+row.id+')" data-previousvalue="'+row.status+'">', {
id: 'resstatus-' + row.id, // custom id
value: data
}).append(statusList.map(function(knownStatus) {
let $option = $('<option>', {
text: knownStatus.text,
value: knownStatus.id
});
if (row.status === knownStatus.id) {
$option.attr('selected', 'selected');
}
return $option;
})).on('change', function() {
changeresstatus(row.id); // Call change with row ID
}).prop('outerHTML');
} else {
return data;
}
}
}
]
});
});
/**
* jQuery plugin to convert text in a cell to a dropdown
*/
(function($) {
$.fn.createDropDown = function(items) {
let oldTxt = this.text();
let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
if (isKnown) {
this.empty().append($('<select>').append(items.map(function(item) {
let $option = $('<option>', {
text: item.text,
value: item.id
});
if (item.id === oldTxt) {
$option.attr('selected', 'selected');
}
return $option;
})));
}
return this;
};
})(jQuery);
// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
$('#resdatatable > tbody tr').each(function(i, tr) {
$(tr).find('td').last().createDropDown(statusList);
});
}
function getStatusList() {
return [{
id: 'Confirmed',
text: 'Confirmed'
}, {
id: 'Unconfirmed',
text: 'Unconfirmed'
}, {
id: 'Communicating',
text: 'Communicating'
}, {
id: 'Open',
text: 'Open'
}, {
id: 'Closed',
text: 'Closed'
}, {
id: 'Canceled',
text: 'Canceled'
}, {
id: 'Reallocated',
text: 'Reallocated'
}, {
id: 'No Show',
text: 'No Show'
}];
}
I need to sort bookingdatetime, pickupdatetime, dropdatetime accurately (they are currently being converted into MM/DD/YY in the PHP script)
Maybe you can prepend hidden <span> elements containing the respective unix timestamps in the cells that have dates (by manually parsing the dates). Then using such columns to sort alphabetically would practically sort time-wise.