DataTables Searching Option is not working - datatable

If i search "Hossain" datatable is not getting sorted. Though this data is available in datatable. How can i solve this problem?
var table = $('#list_table').DataTable( {
"processing": true,
"serverSide": true,
"destroy": true,
"searching": true,
"ordering": true,
"bInfo": true,
"paging": true,
"ajax": {
"url": "{{URL::to('/')}}/current_employeelist",
"type": "POST",
"headers":{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
"data": {location: $("#location").val()}
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('employee_image')}}/'+JsonResultRow.Images+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<a target="_blank" href="{{URL::to('/')}}/employeeinfo/'+full.id+'">'+full.employee_name+'</a>';
}
},
{ "data": "location_name" },
{ "data": "depertment_name" },
{ "data": "designation_name" },
{ "data": "contact_number" },
{ "data": "joining_date" },
#permission('EditEmployeeInfo')
{ "data": "Link", name: 'action', orderable: false, searchable: false},
#endpermission
],[enter image description here][1]
"order": [[0, 'asc']]
});
I want to get searching actual data from datatable.
Image is here

Related

SearchPanes options are empty on the serverSide yajra dataTable

I tried to use the SearchPanes on the serverSide datatable, but It doesn't work; the SearchPanes options are empty.
public function getSalesReturnsData()
{
$sales = Sale::query()
->select(DB::raw("Bestelldatum, kLieferscheinPos ,cBestellNr,
Verkaufsplattform, SKU, GTIN, HAN, Hersteller, Lieferant, cName,
Menge, VKPreis, UVP, Farbe, Groesse, Warengruppe, Transaktion,
Anmerkung, Lieferland, Versandart, Zahlungsart, VersandkostenBrutto,
GutscheinBestellungBrutto"))
->where('Bestelldatum', '>', now()->subDays(30)->endOfDay());
$returns = ProductReturn::query()
->select(DB::raw("Retourendatum, kRMRetoure,cBestellNr, Verkaufsplattform,
SKU, GTIN, HAN, Hersteller, Lieferant, cName, Menge, VKPreis, UVP, Farbe,
Groesse, Warengruppe, Transaktion, Anmerkung, Lieferland, Versandart,
Zahlungsart, VersandkostenBrutto, GutscheinBestellungBrutto"));
$results = $sales->unionAll($returns);
return DataTables::of($results)
->addColumn('Bestelldatum', function ($row) {
$bestelldatum = date("d.m.Y", strtotime($row->Bestelldatum));
return $bestelldatum;
})->make(true);
}
JavaScript
$(document).ready(function () {
load_data();
function load_data() {
$('#datatable').DataTable({
processing: true,
serverSide: false,
ajax: {
url: "{{ route('getSalesReturnsData') }}"
},
"columns": [{
"data": "Bestelldatum"
},
{
"data": "kLieferscheinPos"
},
{
"data": "cBestellNr"
},
{
"data": "Verkaufsplattform"
},
{
"data": "SKU"
},
{
"data": "GTIN"
},
{
"data": "HAN"
},
{
"data": "Hersteller"
},
{
"data": "Lieferant"
},
{
"data": "cName"
},
{
"data": "Menge"
},
{
"data": "VKPreis"
},
{
"data": "UVP"
},
{
"data": "Farbe"
},
{
"data": "Groesse"
},
{
"data": "Warengruppe"
},
{
"data": "Transaktion"
},
{
"data": "Anmerkung"
},
{
"data": "Lieferland"
},
{
"data": "Versandart"
},
{
"data": "Zahlungsart"
},
{
"data": "VersandkostenBrutto"
},
{
"data": "GutscheinBestellungBrutto"
},
],
dom: 'PBfrtip',
stateSave: true,
searchPanes: {
initCollapsed: true,
cascadePanes: true,
dtOpts: {
paging: 'flase',
pagingType: 'simple',
select: {
style: 'multi'
}
},
columns: [3, 5, 8, 6, 7, 9, 11, 16]
}
});
}
});

Adding 750 rows into Datatables rows().add()

I am adding rows to a Datatable with the following code :
for (var key in itm) {
t.row.add([
null,
itm[key].itemcode,
itm[key].itemdesc,
itm[key].batch,
itm[key].expiry,
itm[key].qty,
itm[key].unit,
itm[key].rate,
itm[key].total,
itm[key].discper,
itm[key].discamt,
itm[key].staxper,
itm[key].staxamt,
itm[key].amount,
itm[key].netprate,
itm[key].salerate,
itm[key].page,
itm[key].sub1,
itm[key].sub2,
'<i class="fa fa-edit"></i>',
'<i class="fa fa-trash"></i>'
]).draw(false);
}
This is working fine except for the large data. When I try to add around 750 rows its too slow even the page hangs-up some times.
I tried to add the data using rows.add() API but its not working, the table is blank. Here is the code i am using to add bulk data.
var t = $('#productTable').DataTable();
t.rows.add(itm);
My datatable definition is as under :
$('#productTable').DataTable({
"paging": false,
"ordering": false,
"searching": false,
"info": false,
"rowHeight": '100px',
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"columns": [
{ data: null },
{ data: 'itemcode' },
{ data: 'itemdesc' },
{ data: 'batch' },
{ data: 'expiry' },
{ data: 'qty' },
{ data: 'unit' },
{ data: 'rate' },
{ data: 'total' },
{ data: 'discper' },
{ data: 'discamt' },
{ data: 'staxper' },
{ data: 'staxamt' },
{ data: 'amount' },
{ data: 'netprate' },
{ data: 'salerate' },
{ data: 'page' },
{ data: 'sub1' },
{ data: 'sub2' },
{ data: null },
{ data: null },],
"columnDefs": [
{ className: "dt-right", "targets": [7,8,9,10,11,12,13] },
{ "targets": varbatchcol, visible: false },
{ "targets": vardisccol, visible: false },
{ "targets": vartaxcol, visible: false },
{ "targets": vartotcol, visible: false },
{ "targets": [17,18], visible: false },
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
}
});
and the data coming from server is :
Found the problem.
t.rows.add(itm);
should be
t.rows.add(itm).draw();
And this also solved the slow populating issue.

Datatable Search Filter Column problem "mb_strtolower() expects parameter 1 to be string, array given"

I want to make a Prescription management system with laravel. so need to patient list. i loaded patient information in Datatable. this is loaded successfully but when i use Datatable Search Filter Column then this error message come "mb_strtolower() expects parameter 1 to be string, array given"
var table = $('#patient-data-table').DataTable( {
"processing": true,
"serverSide": true,
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"aoColumnDefs": [{ "bVisible": false, "aTargets": [1] }],
"ajax": {
"url": "{{URL::to('/')}}/patientList",
"type": "GET",
"dataType": "json",
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('patient_image')}}/'+JsonResultRow.image+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "fullName" },
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
},
{ "data": "contact_number" },
{ "data": "gender" },
{ "data": "Link", name: 'link', orderable: false, searchable: false}
],
"order": [[1, 'asc']]
} );
How can i solve this problem?
Try change:
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
},
For:
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
searchable: false, //add this line
},

v-on:click not working with datatables

I am using yajra datatables:
var table = $("#dt_user_draw").DataTable({
destroy: true,
processing: true,
responsive: true,
serverSide: true,
ordering: false,
"ajax": {
"method": "GET",
"url": 'url'
},
"columns": [
{
"data": "user"
},
{
"data": "email"
},
{
"data": "registered_at",
},
{
"render": function (data, wea, row) {
return '<i v-on:click="showDrawUser" class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>';
}
},
]
});
In the last row, add v-on:click but this is not working. I do not how to do to vue render after datatables load

Datagrid delete column with confirmation

This is my code
function GetLaminasyon() {
$('#tblLaminasyon').DataTable().destroy();
$('#tblLaminasyon').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searching":false,
"data": objLaminasyon,
"columns": [
{ "data": "Name" },
{ "data": "Amount" },
{ "data": "Price" },
{
"data": "Id",
"render": function(data,type,row) {
var actionButton = "<button type='button' id='btnDeleteLaminasyon' class='btn btn-danger'>Sil</button>";
return actionButton;
}}
]
} );
}
How can i a delete confirmation for this datatable? I tried to find the solution but i couldnt find it. thanks a lot.

Resources