Yajra Datatable get name by id laravel 5.3 - php

Here's my car index blade code :
#extends('layout.master')
#section('content')
<div id="content" class="content">
<h1 class="page-header">Car <small>panel</small></h1>
#include('partials.message')
<div class="row">
<div class="col-md-12">
<div class="panel panel-inverse" data-sortable-id="ui-general-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-plus"></i> Add
</div>
<h4 class="panel-title">Car</h4>
</div>
<div class="panel-body">
<table class="table table-bordered" id="datatable" style="width: 100%">
<thead>
<tr>
<th>Car Category</th>
<th>Year</th>
<th>Color</th>
<th>Plate No</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr id="filterRow" class="hidden-xs">
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<i class="fa fa-angle-up"></i>
</div>
#include('partials.modalDelete')
</div>
#endsection
#push('pageRelatedJs')
<script type="text/javascript">
$(document).ready(function(){
var datatable = $('#datatable').DataTable(
{
dom: "lfrtip",
responsive: true,
processing: true,
serverSide: true,
ajax: {
url: "{{ route('car.list') }}",
data: { '_token' : '{{csrf_token() }}'},
type: 'POST',
},
columns: [
{ data: 'car_category_id', name: 'car_category_id', className: 'text-center',},
{ data: 'year', name: 'year', className: 'text-center', },
{ data: 'color', name: 'color', className: 'text-center', },
{ data: 'plate_no', name: 'plate_no', className: 'text-center', },
{ data: 'status', name: 'status', className: 'text-center', },
{ data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false },
],
initComplete: function () {
this.api().columns().every(function () {
$('#datatable thead tr#filterRow th:not(:last-child)').each( function () {
var title = $('#datatable thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" class="col-md-12" placeholder="Search by '+title+'" />');
});
$("#datatable thead input").on('keyup change', function () {
datatable.column( $(this).parent().index()).search(this.value).draw();
});
});
}
});
});
</script>
<script src="{{ asset('assets/js/modal_delete.js') }}"></script>
#endpush
How can I get the car_category [name] by Id.
Note: 2 tables car_category and car
Ex: I have 2 categories, 1.suv 2.sport. and I want to add a new car, when I submit it, it shows id instead of name. any idea ?

Related

Hide the action column in Yajra datatables using gates

I'm pretty new to Laravel. I want to hide the Action column of the Yajra Datatable for specific users using Gates based on their roles.
I have been able to hide the buttons in the controller, but I want to hide the entire action column in the blade file so the users will not see it at all.
I have tried this
Jquery Codes
var table = $('.cdata-tables').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('clients.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'location', name: 'location'},
{data: 'description', name: 'description'},
{data: 'testimonial', name: 'testimonial'},
#can('view-actions'){data: 'action', name: 'action', orderable: false, searchable: false}#endcan,
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: [3]
}
]
});
HTML Codes
<table class="table table-striped table-bordered responsive cdata-tables" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</tfoot>
</table>
Controller codes
public function index(Request $request)
{
if ($request->ajax()) {
$data = Client::latest()->get();
$this->user = Auth::user();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '';
if ($this->user->can('view-actions')){
$btn = '<i class="p-1 zmdi zmdi-edit"></i>';
$btn = $btn.' <i class="p-1 zmdi zmdi-delete"></i>';
};
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.pages.client');
}
I just keep getting "Processing..." when I load the file on the browser on the Datatable. Please help out.

AdminLTE Pagination - Where to Start?

I'm building a web database application in PHP PDO using the AdminLTE template and Booststrap 3.
I need to add pagination to my application (as I have a large amount of records) and have a limit of 25 records per page. I am fairly new at programming and have no idea where to start. Any help would be appreciated.
<?php
$content = '<div class="row">
<div class="col-xs-12">
<div class="box box-danger">
<div class="box-header">
<h3 class="box-title">Members List</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="members" class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>';
include('../master.php');
?>
<!-- page script -->
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../api/member/read.php",
dataType: 'json',
success: function(data) {
var response="";
for(var user in data){
response += "<tr>"+
"<td>"+data[user].name+"</td>"+
"<td>"+data[user].residential_address+"</td>"+
"<td>"+data[user].mailing_address+"</td>"+
"<td>"+data[user].precinct+"</td>"+
"<td>"+data[user].age+"</td>"+
"<td>"+data[user].ethnicity+"</td>"+
"<td>"+data[user].gender+"</td>"+
"<td>"+data[user].party+"</td>"+
"<td>"+data[user].race+"</td>"+
"<td>"+data[user].phone+"</td>"+
"<td><a href='update.php?id="+data[user].id+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id+"')>Remove</a></td>"+
"</tr>";
}
$(response).appendTo($("#members"));
}
});
});
function Remove(id){
var result = confirm("Are you sure you want to delete the selected member from the database?");
if (result == true) {
$.ajax(
{
type: "POST",
url: '../api/member/delete.php',
dataType: 'json',
data: {
id: id
},
error: function (result) {
alert(result.responseText);
},
success: function (result) {
if (result['status'] == true) {
alert("The member was successfully removed from the database.");
window.location.href = '/ccrp/members';
}
else {
alert(result['message']);
}
}
});
}
}
</script>

Angularjs ng-click not working in laravel #PHP

I have just created a very simple app. It only contains one function which is used in ng-click. Somehow, ng-click is not firing. Can anyone take a look for me?
<div class="form-inline">
<label for="primary" style="padding-right:5px">Primary skill </label>
<select id="primary" class="form-control" ng-model="primary" id="primary" ng-options="s.skill_name for s in skills| excludeFrom:secondary"></select>
<label for="secondary">Secondary skill </label>
<select id="secondary" class="form-control " id="secondary" ng-model="secondary" ng-options="s.skill_name for s in skills| excludeFrom:primary"></select>
<div ng-controller="profileController">
<input type="button" value="Search" class="mx-sm-3 btn btn-primary" ng-model="searchbtn" name="search" ng-click="profileController.getprofile()">
<table class="table" id="myTable">
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Primary skill1</th>
<th>Primary skill2</th>
<th>Primary skill3</th>
<th>Secondary skill1</th>
<th>Secondary skill2</th>
<th>Secondary skill3</th>
<th>Secondary skill4</th>
<th>Secondary skill5</th>
</tr>
<tr ng-repeat="p in profiles">
</tr>
</table>
</div>
</div>
<script>
function profileController($scope, $http) {
$scope.getprofile = function() {
var pskill = $("#primary").val();
var skill = $("#secondary").val();
$http({
url: "{{PROFILE_REPOSITORY}}",
method: "POST",
data: { "_token": { { csrf_token() } }, 'primary': pskill, 'secondary': skill },
}).then(function(response) {
$scope.profiles = response.data;
console.log(response.data);
}),
function(response) {
console.log('failed');
}
}
}
</script>
<div class="form-inline">
<label for="primary" style="padding-right:5px">Primary skill </label>
<select id="primary" class="form-control" ng-model="primary" id="primary" ng-options="s.skill_name for s in skills| excludeFrom:secondary"></select>
<label for="secondary">Secondary skill </label>
<select id="secondary" class="form-control " id="secondary" ng-model="secondary" ng-options="s.skill_name for s in skills| excludeFrom:primary"></select>
<div ng-controller="profileController">
<input type="button" value="Search" class="mx-sm-3 btn btn-primary" ng-model="searchbtn" name="search" ng-click="getprofile()">
<table class="table" id="myTable">
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Primary skill1</th>
<th>Primary skill2</th>
<th>Primary skill3</th>
<th>Secondary skill1</th>
<th>Secondary skill2</th>
<th>Secondary skill3</th>
<th>Secondary skill4</th>
<th>Secondary skill5</th>
</tr>
<tr ng-repeat="p in profiles">
</tr>
</table>
</div>
</div>
<script>
function profileController($scope, $http) {
$scope.getprofile = function() {
var pskill = $("#primary").val();
var skill = $("#secondary").val();
$http({
url: "{{PROFILE_REPOSITORY}}",
method: "POST",
data: { "_token": { { csrf_token() } }, 'primary': pskill, 'secondary': skill },
}).then(function(response) {
$scope.profiles = response.data;
console.log(response.data);
}),
function(response) {
console.log('failed');
}
}
}
</script>

Render checkbox in DataTables

I have this table,
<table class="table is-fullwidth" id="users-table">
<thead>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</tfoot>
</table>
and dataTable javascript in my index.blade.php
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [ {
orderable: false,
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
})
</script>
and this method in my controller
public function anyData()
{
$users = UserRole::selectRaw('users.id, users.first_name, users.last_name, users.email, roles.role')
->join('users', 'users.id', '=', 'user_roles.user_id')
->join('roles', 'roles.id', '=', 'user_roles.role_id');
return Datatables::of($users)
->addColumn('select', 'systemusers::data-table.checkbox')
->make(true);
}
and for data-table\checkbox.blade.php the content is this,
<input type="checkbox" name="" value="">
This is based on the documentation found here
https://yajrabox.com/docs/laravel-datatables/master/add-column and some example here https://datatables.yajrabox.com/eloquent/add-edit-remove-column
but when I look at the output, this was the result.
I print the checkbox html code, My question is how to render that into checkbox?
You can try {!! '<input type="checkbox" name="" value="">' !!} instead of {{ '<input type="checkbox" name="" value="">' }}
Since you are using the select extension and the checkbox is supposed to work along with that, you really not need to provide a checkbox yourself.
Just add className: 'select-checkbox' to the first column, i.e
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [{
orderable: false,
targets: 0,
className: 'select-checkbox' //<--- here
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
See https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Retrieve Data from Database to Option Value via AJAX

I am having problems trying to fetch some data from my database to display it in a value, I'm using Smarty as a template engine, I have my working code which is:
<div style="width: 50%">
<table id="listado" width="100%" cellpadding="2" cellspacing="1" border="0">
<thead>
<tr>
<th> </th>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">NOMBRE</th>
<th style="text-align: center;">DOCUMENTO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
{literal}
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
"url": API_PATH+"/empresas/",
"method": "GET",
"dataType": 'json',
'cache':false
}).done(function (response) {
var allregs = [];
$.each(response, function(key,val){
var items = [];
items.push('<tr>');
items.push('<td style="text-align: center;">seleccionar</td>');
items.push('<td style="text-align: center;">'+val.id+'</td>');
items.push('<td style="text-align: center;">'+val.nombre+'</td>');
items.push('<td style="text-align: center;">'+val.documento+'</td>');
items.push('</tr>');
allregs.push(items);
});
$('#listado tbody').append(allregs.join(''));
}).fail(function(jqXHR, textStatus){
if(jqXHR.status == 404){
alert("No existen registros");
}
});
$('body').on('click','.selectEmpresa',function(){
var empresaid = $(this).attr('data-id');
$.ajax({
"url": API_PATH+"/empresas/select/"+empresaid,
"method": "GET",
"dataType": 'json',
'cache':false
}).done(function (response) {
location.href = SERVER_PATH+'/';
}).fail(function(jqXHR, textStatus){
alert('error');
});
});
});
</script>
{/literal}
it works perfectly using normal thead, tbody, tr, td, what im trying to do is fetch the same data just val.nombre but inside :
<div class="container">
<section>
<select class="cs-select cs-skin-border">
<option value="" disabled selected>Seleccionar Empresa</option>
<option value="prueba1">Prueba 1</option>
<option value="prueba2">Prueba 2</option>
<option value="prueba3">Prueba 3</option>
</select>
</section>
</div>
<script src="{$smarty.const.ASSETS_FOLDER}/select-empresas/classie.js"></script>
<script src="{$smarty.const.ASSETS_FOLDER}/select-empresas/selectFx.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
</script>
instead of setting the values manually I want to fetch it from the database dynamically

Categories