i try to use yajra datatables laravel
i have problem in searching
when i search data already exits in datatables it no working
me already try example in documentation but it not working for me
can someone please help me?
teach me how to do like i mean
example data
example searching
** this is my javascript datatables**
let oTable = $("#example1").DataTable({
responsive: true,
autoWidth: false,
processing: true,
serverSide: true,
ajax:
{
url: '{{ route("data.user.datatables") }}',
type: 'GET',
data: function (d) {
d.filter = $('select[name=filter]').val();
}
},
columns: [
{ data: 'id'},
{ data: function(data, type, row){
return 'Username : ' + data.username +
'<br> Email : ' + data.email +
'<br> Ponsel : ' + data.contact_number;
},
name: 'username'
},
{
data: function(data, type, row){
return 'Register Date : ' + data.created_at +
'<br> Last Login : ' + data.last_login +
'<br> App By : '+ data.app_admin +' / '+ data.date_admin_app +
'<br> App By : '+ data.login +' || '+ data.status_member;
},
name: 'created_at'
},
{ data: function(data, type, row){
return 'Saldo : ' + data.saldo +
'<br> Bank Name : ' + data.bank_name +
'<br> Account Name : '+ data.account_name +
'<br> Account Number : '+ data.account_number;
},
name:'saldo'
},
{ data: 'action', orderable: false, searchable: false}
],
order:[[0,'desc']],
});
this in my Laravel CONTROLLER
if($request->ajax()):
$request->validate([
'filter' => ['string','nullable','alpha'],
]);
if($request->filled('filter')):
$users = User::query()->where('status_member', $request->filter);
else:
$users = User::query();
endif;
$data = Datatables::of($users);
$data->addIndexColumn();
$data->addColumn('action', function ($user) {
return '<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item modal-edit-user" data-toggle="modal" data-target="#modalEditUser" href="javascript:void(0)" data-id="' . $user->id . '" data-username="' . $user->username . '" >Edit</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>';
});
$data->rawColumns(['action']);
return $data->make();
endif;
You are forwarding nothing at all to user query.
Instead of
$users = User::query()->where('status_member', $request->filter);
...
$users = User::query();
try doing
$users = User::where('status_member', $request->filter)->get();
...
$users = User::all();
EDIT:
update your code:
{ data: 'action', orderable: false, searchable: false}
to
{ data: 'action', orderable: false, searchable: true}
Related
What I want to do is to input some date time range and show me the data in a BootstrapTable. I am not able to do it.
I have two php files one is my WebSite and the other is the MySql query.
So this where I load the Input data fields and my BootstrapTabel:
<div class='col-md-2 float-left'>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Datum von:</span>
</div>
<input id="dateVon" name="dateVon" value="2022-01-01" type="text" class="form-control" placeholder="2022-01-01" aria-describedby="dateVon">
</div>
</div>
<div class='col-md-2 float-left'>
<div class="input-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Datum bis:</span>
</div>
<input id="dateBis" name="dateBis" value="2022-01-31" type="text" class="form-control" placeholder="2022-01-31" aria-describedby="dateBis">
</div>
</div>
</div>
<button id="remove" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal" disabled>
<i class="bi bi-trash"></i> Delete
</button>
<button id="refresh" class="btn btn-primary btn-sm" onclick="refreshFunction(dateVon,dateBis);">
<i class="bi bi-trash"></i> Refresh
</button>
</div>
<div class="card-body">
<table id="table"
data-toolbar="#table-responsive"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-pagination="true"
data-id-field="ID"
data-page-size="50"
data-page-list="[50, 100, all]"
data-show-footer="true"
data-side-pagination="client"
data-url="verpAnrufData.php"
data-response-handler="responseHandler"
data-detail-view="true">
</table>
<script>
var $table = $('#table')
var $remove = $('#remove')
var selections = []
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row.ID
})
}
function responseHandler(res) {
$.each(res.rows, function(i, row) {
row.state = $.inArray(row.ID, selections) !== -1
})
return res
}
function totalTextFormatter(data) {
return 'Total'
}
function totalNameFormatter(data) {
return data.length
}
function totalPriceFormatter(data) {
var field = this.field
return '$' + data.map(function(row) {
return +row[field].substring(1)
}).reduce(function(sum, i) {
return sum + i
}, 0)
}
function initTable() {
$table.bootstrapTable('destroy').bootstrapTable({
locale: 'de-DE',
columns: [{
field: 'state',
checkbox: true,
rowspan: 1,
align: 'center',
valign: 'middle'
}, {
field: 'id',
title: 'ID',
rowspan: 1,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
field: 'name',
title: 'Kunde',
sortable: true,
align: 'left',
footerFormatter: totalNameFormatter
}, {
field: 'callerid',
title: 'Anrufer',
sortable: true,
align: 'left'
}, {
field: 'datetime_entry_queue',
title: 'DatumZeit',
sortable: true,
align: 'left'
}, {
field: 'duration_wait',
title: 'Warteschleife (sec)',
sortable: true,
align: 'left'
}]
})
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function() {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
//$btnEdit.prop('disabled', !$table.bootstrapTable('getSelections').length)
// save your data, here just save the current page
selections = getIdSelections()
// push or splice the selections if you want to save all data selections
})
$table.on('all.bs.table', function(e, name, args) {
console.log(name, args)
})
}
$(function() {
initTable()
$('#locale').change(initTable)
})
function refreshFunction() {
var data = {
dateVon: $("input[id='dateVon']").val(),
dateBis: $("input[id='dateBis']").val()
};
$.ajax({
method: "post",
url: "verpAnrufData.php",
data: data,
success: function(response) {
/* console.log(data); */
/* params.success({
"rows": data,
"total": data.length
}, null, {}); */
//initTable();
$table.bootstrapTable('refresh')
}
})
}
and this is my MySql php file:
<?php
include "dbConn.php";
$dateVon = $_POST["dateVon"];
$dateBis = $_POST["dateBis"];
$sqltran = mysqli_query($db, "SELECT ce.id,
ce.callerid,
ce.datetime_entry_queue,
ce.duration_wait,
convert(cast(convert(cae.name using latin1) as binary) using utf8) name
FROM call_center.call_entry ce, call_center.campaign_entry cae
WHERE ce.id_campaign = cae.id
AND datetime_entry_queue BETWEEN '$dateVon 00:00:00' AND '$dateBis 23:59:59'
AND status = 'abandonada'
ORDER BY name, datetime_entry_queue ASC;");
$count = mysqli_num_rows($sqltran) ;
$arrVal = array();
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'id' => $rowList['id'],
'name'=> $rowList['name'],
'callerid'=> $rowList['callerid'],
'datetime_entry_queue'=> $rowList['datetime_entry_queue'],
'duration_wait'=> $rowList['duration_wait'],
);
array_push($arrVal, $name);
$i++;
}
$allData = array(
'total' => $count,
'rows' => $arrVal,
);
echo json_encode($allData);
mysqli_close($db); // close connection
If i harde code the Dates in this file like this:
$dateVon = "2022-01-01";
$dateBis = "2022-12-31";
Then I can see the data, but then I am not able to input another dates and refresh it.
I am desperate I can not make it work, pls help. :)
I have found the answer of my problem, it was in the ajax function and the way I was responding the cell. Thx KIKO Software for the sugesstion.
function refreshFunction() {
$.ajax({
method: "POST",
dataType: "json",
url: "verpAnrufData.php",
data: {
dateVon: $("input[id='dateVon']").val(),
dateBis: $("input[id='dateBis']").val()
},
success: function(response) {
console.log(response);
$table.bootstrapTable('load',{
"rows": response,
"total": response.length
}, null, {});
}
})
};
I use laravel with datatable to display large data table.
I have a delete button at the end of each row to delete record from my database.
I use ajax and if it's a success I remove the row.
It work well on desktop but it doesn't work on mobile (except if I set computer version).
Here my table :
<table class="datatable table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
<thead>
<tr>
<th>Numéro</th>
<th>Bâtiment</th>
<th>Nature</th>
<th>Options</th>
</tr>
</thead>
</table>
My js to load data :
var table = $('.datatable').DataTable({
responsive: true,
ajax: '{{ route('lots.clientSide') }}',
deferRender: true,
scrollY: '500px',
scrollCollapse: true,
scroller: true,
stateSave: true,
select: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
select: {
rows: "%d éléments sélectionnés"
}
},
columns: [
{ data: 'id' },
{ data: 'batiment.nom', defaultContent: "----" },
{ data: 'nature' },
{ data: null }
],
columnDefs:[
{targets:-1,title:"Options",width: "10%",orderable:!1,render:function(a,t,e,n){
var slug = e.id;
var url = 'show';
var url_delete = "lots/delete/"+e.id;
return '\n<a href="'+url+'" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View">\n'+
'<i class="la la-eye"></i>\n'+
'</a>'+
'<span class="dropdown">\n'+
'<a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">\n'+
'<i class="la la-ellipsis-h"></i>\n'+
'</a>\n'+
'<div class="dropdown-menu dropdown-menu-left">\n'+
'<a class="dropdown-item" href="#"><i class="la la-edit"></i> Editer</a>\n'+
'<button class="delete dropdown-item" data-href="'+url_delete+'"><i class="la la-trash"></i> Supprimer</button>\n'+
'</div>\n'+
'</span>\n'
}}
]
});
And my code for the remove :
$(document).on('click', '.delete', function(e){
var $this = $(this);
table.row($this.parents('tr')).remove().draw(false);
alert("click");
$.ajax({
type: 'GET',
url: $this.data('href'),
dataType: 'json',
success: function( data ) {
},
error: function(xhr, status, error) {
alert("fail");
}
})
});
I tried with debug tools on computer and I've got nothing on console.
If I use the function on computer, it work. But if I reduce size of the windows, it doesn't work under a certain size.
Is it normal ? Can I do something about it ?
Thank
I manage to avoid this problem by not hidding delete button on mobile.
i'm working on a page having two radio buttons and a table filled with data from the controller. the data shown in the table are from two different categories.
now i want to make sure that when user chooses a different radio button it displays just the category of this button not both categories
here is my try
this is the Controller method that retrieves the data
public function Data(){
$data = App\Equations::get();
return array('aaData'=>$data);
}
and here how i receive it in the view using Ajax
var table = $('#table-active').DataTable({
responsive: {
details: {
type: 'column',
target: -1
}
},
ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
buttons: {
dom: {
button: {
className: 'btn btn-default'
}
},
buttons: [
{
extend: 'colvis',
text: '<i class=icon-loop3></i>',
className: 'btn btn-default',
action: function ( e, dt, node, config ) {
$.ajax({
url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content')}
});
$('#table-active').DataTable().ajax.reload();
}
},
{extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
{extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
{extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
{extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
{extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
{
extend: 'colvis',
text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
className: 'btn bg-blue btn-icon'
}
]
},
columnDefs: [
{
className: 'control',
orderable: false,
targets: -1
}],
deferRender: true,
columns:[
{"render": function ( type, full, data, meta ) {
return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
}},
{"render": function ( type, full, data, meta ) {
return '<input type="text" name='+data.id+' value='+data.value+'>';
}},
{ "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
and here is the form that contains the two radio buttons that i want to change table content when checked
<form action="{{url('update_price')}}" method="get" id="update">
<div class="panel-heading">
<h5 class="panel-title">Update Prices NOW!</h5>
</div>
<div class="row" style="margin-left: 5%">
<h3>Please Choose a Category</h3>
<input class="radio" id="radio-1" name="rd" type="radio" checked value="engineer">
<label tabindex="4" for="radio-1" class="radio-label">Engineer</label>
<br />
<input class="radio" id="radio-2" name="rd" type="radio" value="user">
<label tabindex="5" for="radio-2" class="radio-label">Normal User</label>
<br />
</div>
<div class="panel-body">
</div>
<table class="table" width="100%" id="table-active">
<thead>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
</thead>
</table>
<button id="button" style="margin-left: 45%;back"></button>
</form>
have you tried with some function in jquery to get again the data when the radio button clicked? and adding a category parameter to the ajax request..
Something like this:
$('.radio').on('click', function(){
var table = $('#table-active').DataTable({
responsive: {
details: {
type: 'column',
target: -1
}
},
ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
buttons: {
dom: {
button: {
className: 'btn btn-default'
}
},
buttons: [
{
extend: 'colvis',
text: '<i class=icon-loop3></i>',
className: 'btn btn-default',
action: function ( e, dt, node, config ) {
$.ajax({
url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content'), category: 'id_category'}
});
$('#table-active').DataTable().ajax.reload();
}
},
{extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
{extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
{extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
{extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
{extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
{
extend: 'colvis',
text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
className: 'btn bg-blue btn-icon'
}
]
},
columnDefs: [
{
className: 'control',
orderable: false,
targets: -1
}],
deferRender: true,
columns:[
{"render": function ( type, full, data, meta ) {
return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
}},
{"render": function ( type, full, data, meta ) {
return '<input type="text" name='+data.id+' value='+data.value+'>';
}},
{ "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
});
I'm trying to Ajax success message in Ajax success method, but i got Unexpected token ( error on my console by using inspect element browser.
here's my Ajax code so far :
$(document).ready(function() {
var rawDORecordsDataTable = $('#raw_do_record_table').DataTable(
{
dom: 'Blrtip',
orderCellsTop: true,
responsive: true,
processing: true,
serverSide: true,
iDisplayLength: 50,
ajax: {
url: '{{ route('raw_do_record.list') }}',
data: function(data) {
data._token = '{{ csrf_token() }}';
data.do_date = $('#search_date').val();
data.do_status = 0;
},
type: 'POST',
},
columns: [
{ data: 'do_no', name: 'do_no' },
{ data: 'do_status', name: 'do_status' },
{ data: 'customer', name: 'customer' },
{ data: 'store_isn', name: 'store_isn' },
{ data: 'warehouse_status', name: 'warehouse_status' },
{ data: 'do_date', name: 'do_date' },
{ data: 'delivery_status', name: 'delivery_status' },
{ data: 'action', name: 'action', orderable: false, searchable: false },
] ,
searchCols: [
null ,
{ "search" : 0} ,
],
buttons: [
#if(Gate::allows('views',[[Department::LOGISTICS]]))
{ text: 'Generate All',
action: function ( e, dt, node, config ) {
$('#generate_all_modal').modal('show')
}
},
#endif
{ text: '<i class="fa fa-refresh"></i> Refresh DO',
action: function ( e, dt, node, config ) {
$('#refresh_do_modal').modal('show')
}
}
],
})
.on('click', 'a.stop', function(e) {
$.ajax({
url: '{{ route('raw_do_record.list') }}',
type: 'POST',
data: {
'_token' : '{{csrf_token() }}',
},
success: function(data) {
alert("asd");
},
error: function(data) {
alert("asdasd");
}
});
});
and here's the modal html :
<div class="modal fade bs-modal-sm" id="stop_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
{{ Form::open([
'method' => 'POST',
'id' => 'stop-form'
]) }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Stop Confirmation</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Are you sure want to stop the process?<br>This DO no longer useable</label>
</div>
</div>
<div class="modal-footer">
<button class="btn sbold btn-danger" type="submit">
</i> Yes
</button>
<button type="button" class="btn sbold blue" data-dismiss="modal">No</button>
</div>
{{ Form::close() }}
</div>
</div>
any idea ?
I'm using Yajra datatable, I had an issue as what title said.
here's my controller so far :
public function makeActionButtonsForDatatable($model)
{
if ($model->employed_type == DriverEmployedType::PARTTIME) {
return '<a href="' . route('parttimeavailable.create', ['driver' => $model->id]) . '"
class="btn btn-default btn-xs"></span>Set Parttime
</a>
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>';
}
switch ($model->status) {
default:
return'
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>
';
break;
}
}
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return '<a href="' . route('driver.edit', ['driver' => $model->full_name]) . '"</a>';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
and here's my datatable code so far :
$(document).ready(function(){
var datatable = $('#datatable').DataTable(
{
dom: "lrtip",
responsive: true,
processing: true,
serverSide: true,
bSortCellsTop: true,
ajax: {
url: "{{ route('driver.list') }}",
data: { '_token' : '{{csrf_token() }}'},
type: 'POST',
},
columns: [
{ data: 'full_name', name: 'full_name', className: 'text-center', },
{ data: 'mobile', name: 'mobile', className: 'text-center', },
{ data: 'nric', name: 'nric', className: 'text-center', },
{ data: 'license', name: 'license', className: 'text-center', },
{ data: 'employed_type', name: 'employed_type', className: 'text-center', },
{ data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false },
],
});
});
It didn't works, and didn't display my fullname column. I want is once I click the name it goes to edit form with that driver Id.
any idea ?
I think you missed to close <a> for fullName column, try below code:
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return ''. $model->full_name .'';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
Let me know if you still facing the same!