I am using data table in my table and I am calling data table functions in ajax call like
function readbroadcastedmessagelist()
{
var usertype = $("#user-type :selected").text();
$.ajax({
url: 'index.php?action=fetchBroadcastedMessageList',
type: 'POST',
dataType: 'JSON',
data: { usertype: usertype },
success: function (data) {
$('.filter-table').css("display","block");
$('#broadcastedmessagelist').empty();
// console.log(data);
if (data.length)
{
$('#broadcasttable table').dataTable({
"sPaginationType": "full_numbers"
});
for (var i in data) {
$("#broadcastedmessagelist").append('<tr>' +
'<td style="text-align: center; text-transform:capitalize">' +
'' + (data[i].userdetails.length ? data[i].userdetails[0]["role"] : ' - ') +
'' + '</td>' + '<td style="text-align: center;">' + '' +
dateSentTextValue + '' + '</td>' +
'<td style="text-align: center;" class="footable-visible">' +
'<span class="label'+ ' '+ className + '">' + '' + TextValue +
'' + '</td>' + '<td style="text-align: center;">' +
'<button data-id=' + '"' + data[i]['broadcast_id'] + '"' +
'class="modalLink btn btn-primary btn-xs" type="button"' +
data-toggle="modal" data-target=".myModal">' +
'<span class="bold"><i class="fa fa-eye"></i> View</span></button>' +
'</td>' +
'</tr>');
}
}
},
error: function (request, status, error) { }
});
}
I am trying to tweak the data table code in order to implement pagination feature only so that rest of the features are omitted.
It first displays "No data available in table" then rest of data in the table.
pagination is not working properly. Page numbers are not added in table.
there should be option for showing dropdown for showing records per page.
It displays "Showing 0 to 0 of 0 entries" despite there exist data in the table.
The html markup is as
<table class="table table-striped table-bordered table-hover dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr role="row"><th style="text-align: center; width: 0px;" rowspan="1" colspan="1">
Sender
</th><th style="text-align: center; width: 0px;" rowspan="1" colspan="1">
Sending Date
</th><th style="text-align: center; width: 0px;" rowspan="1" colspan="1">
Status
</th><th style="text-align: center; width: 0px;" rowspan="1" colspan="1">
View
</th></tr>
</thead>
<tbody id="broadcastedmessagelist"><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">07/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="77" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr>
<tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">07/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="80" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr>
<tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="81" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr>
<tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="82" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="83" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr>
<tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="84" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="85" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="86" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="87" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr><tr><td style="text-align: center; text-transform:capitalize">admin</td><td style="text-align: center;">17/04/2017</td><td style="text-align: center;" class="footable-visible"><span class="label label-danger">Not Delivered</span></td><td style="text-align: center;"><button data-id="88" class="modalLink btn btn-primary btn-xs" type="button" data-toggle="modal" data-target=".myModal"><span class="bold"><i class="fa fa-eye"></i> View</span></button></td></tr></tbody>
</table>
Please help me !!!
Related
I am working on an MLM website trying to pull the users in a binary TREE in the blade view, it works for the first Three users because the user where such ID in query exists. but for users who don't have descendants it throws back error.
Please how can i retrieve a user information from users table and handle error if user does not exist?
my route:
Route::get('{id}/genealogy-tree', 'UsersController#show_genealogy')->name('genealogy-tree');
my controller:
public function show_genealogy($id)
{
// $headuser = User::findOrFail($id);
// $headuser_id = $headuser->id;
if (User::findOrFail($id)->exists()) {
$headuser = User::findOrFail($id);
$headuser_id = $headuser->id;
} else {
$headuser = null;
$headuser_id = null;
}
#-------------------------------------------------------
if (User::where('l_id', $headuser_id)->exists()) {
$lfu = User::where('l_id', $headuser_id)->first();
} else {
$lfu = null;
}
if (User::where('r_id', $headuser_id)->exists()) {
$rfu = User::where('r_id', $headuser_id)->first();
} else {
$rfu = null;
}
// return view('users.genealogy-tree', compact('headuser','lfu','rfu'));
#--------------------------------------------------------
if (User::where('l_id', $lfu->id)) {
$lsu = User::where('l_id', $lfu->id)->first();
} else {
$lsu = null;
}
if (User::where('r_id', $lfu->id)->exists()) {
$rsu = User::where('r_id', $lfu->id)->first();
} else {
$rsu = null;
}
if (User::where('l_id', $rfu->id)->exists()) {
$ltu = User::where('l_id', $rfu->id)->first();
} else {
$ltu = null;
}
if (User::where('r_id', $rfu->id)->exists()) {
$rtu = User::where('r_id', $rfu->id)->first();
} else {
$rtu = null;
}
#--------------------------------------------------------
return view('users.genealogy-tree', compact('headuser','lfu','rfu','lsu','rsu','ltu','rtu'));
// return $lfu;
}
my view:
<div class="table-responsive">
<table class="table" style="align:center; border:o; text-align:center">
<tr height="150" >
<td></td>
#isset($headuser)
<td colspan="6"> <a href="{{route('genealogy-tree', $headuser->id)}}"><i class="fa fa-user fa-4x" style="color: #45fc03 !important; font-size: 1000%;"></i>
<div class="tree_div">
<p>User Name: {{$headuser->name ? $headuser->name : 'No Record'}}</p>
<p>Network Worth: {{$headuser->network_bonus ? $headuser->network_bonus : 'No Record'}}</p>
<p>Donations: {{$headuser->donation_sum ? $headuser->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$headuser->level ? $headuser->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="6"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 1000%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
<td></td>
</tr>
<tr height="150">
#isset($lfu)
<td colspan="4"> <a href="{{route('genealogy-tree', $lfu->id)}}"><i class="fa fa-user fa-4x" style="color: #b6fc03 !important; font-size: 700%;"></i>
<div class="tree_div">
<p>User Name: {{$lfu->name ? $lfu->name : 'No Record'}}</p>
<p>Network Worth: {{$lfu->network_bonus ? $lfu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$lfu->donation_sum ? $lfu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$lfu->level ? $lfu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="4"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
#isset($rfu)
<td colspan="4"> <a href="{{route('genealogy-tree', $rfu->id)}}"><i class="fa fa-user fa-4x" style="color: #b6fc03 !important; font-size: 700%;"></i>
<div class="tree_div">
<p>User Name: {{$rfu->name ? $rfu->name : 'No Record'}}</p>
<p>Network Worth: {{$rfu->network_bonus ? $rfu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$rfu->donation_sum ? $rfu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$rfu->level ? $rfu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="4"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
</tr>
<tr height="150" style="color: #f4fc03; font-size: 130%;">
#isset($lsu)
<td colspan="2"> <a href="{{route('genealogy-tree', $lsu->id)}}"><i class="fa fa-user fa-4x" style="color: #f4fc03 !important;"></i>
<div class="tree_div">
<p>User Name: {{$lsu->name ? $lsu->name : 'No Record'}}</p>
<p>Network Worth: {{$lfu->network_bonus ? $lfu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$lsu->donation_sum ? $lsu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$lsu->level ? $lsu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="2"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
#isset($rsu)
<td colspan="2"> <a href="{{route('genealogy-tree', $rsu->id)}}"><i class="fa fa-user fa-4x" style="color: #b6fc03 !important;"></i>
<div class="tree_div">
<p>User Name: {{$rsu->name ? $rsu->name : 'No Record'}}</p>
<p>Network Worth: {{$rsu->network_bonus ? $rsu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$rsu->donation_sum ? $rsu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$rsu->level ? $rsu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="2"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
#isset($ltu)
<td colspan="2"> <a href="{{route('genealogy-tree', $ltu->id)}}"><i class="fa fa-user fa-4x" style="color: #f4fc03 !important;"></i>
<div class="tree_div">
<p>User Name: {{$ltu->name ? $ltu->name : 'No Record'}}</p>
<p>Network Worth: {{$ltu->network_bonus ? $ltu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$ltu->donation_sum ? $ltu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$ltu->level ? $ltu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="2"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
#isset($rtu)
<td colspan="2"> <a href="{{route('genealogy-tree', $rtu->id)}}"><i class="fa fa-user fa-4x" style="color: #b6fc03 !important;"></i>
<div class="tree_div">
<p>User Name: {{$rtu->name ? $rtu->name : 'No Record'}}</p>
<p>Network Worth: {{$rtu->network_bonus ? $rtu->network_bonus : 'No Record'}}</p>
<p>Donations: {{$rtu->donation_sum ? $rtu->donation_sum : 'No Record'}}</p>
<p>Current Level: {{$rtu->level ? $rtu->level : 'No Record'}}</p>
</div></a>
</td>
#else
<td colspan="2"> <a href="#"><i class="fa fa-user fa-4x" style="color: gray !important; font-size: 700%;"></i>
<div class="tree_div">
<br>
<p>{{'No User'}}</p>
</div></a>
#endisset
</tr>
<!-- <tr height="150" style="color: #fcb603; font-size: 100%;">
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
<td> <i class="fa fa-user fa-4x"></i></td>
</tr> -->
</table>
enter code here
first() returns null when a record is not found, you just need to check for null before using the variable.
You can use optional(..) to avoid null issues or the null function accessor $var?->function(…)
The problem in your controller is because you first try to find the user matching $headuser_id with the code:
if (User::where('l_id', $headuser_id)->exists()) {
$lfu = User::where('l_id', $headuser_id)->first();
} else {
$lfu = null;
You can simplify this to:
$lfu = User::where('l_id', $headuser_id)->first();
As first will return the User or null if they don't exist.
But your error is caused by the code trying to use $lfu->id when $lfu it might be null:
if (User::where('l_id', $lfu->id)) { ...
^^^^^^^^
You either need to check for empty($lfu) or assign the variable in an if, when you find the user you can the use their id to search for the others:
$lsu = null;
$ltu = null;
if ($lfu = User::where('l_id', $headuser_id)->first()) {
$lsu = User::where('l_id', $lfu->id)->first();
$ltu = User::where('l_id', $rfu->id)->first();
}
Hi I am trying to set up a table with parent and child data which can be sorted by using the jquery sortable library, I am able to get the position and the respective ids of the data but unable to send the to the controller using jquery
HTML Part:
<tbody class="sort">
#foreach($menus as $menu)
<tr id = "{{ $menu->id }}" class="parent">
<td>{{$menu->name}}</td>
<td>{{ $menu->link }}</td>
#if($menu->sub == 1)
<td>Active</td>
#else
<td>In-Active</td>
#endif
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$menu->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
#if(count(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get())>0)
#foreach(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get() as $child)
<tr id="{{ $child->id }}">
<td>~{{$child->name}}</td>
<td>{{ $child->link }}</td>
<td></td>
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$child->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
#endforeach
#endif
</tr>
#endforeach
</tbody>
Jquery part:
$(document).ready(function(){
$('.sort').sortable({
stop:function(event, ui){
var parameter = new Array();
var position = new Array();
$('.sort>tr').each(function(){
parameter.push($(this).attr("id"));
});
$(this).children().each(function(index) {
position.push(index + 1);
});
$.ajax({
url:"{{ route('menu.savePosition') }}",
method:"POST",
data:{"id":parameter,"position":position},
success:function(response){
console.log(response);
},
error:function(xhr,response){
console.log(xhr.status);
}
});
},
}).disableSelection();
});
Controller Part:
public function SavePosition(Request $req){
$position = ($req->all());
return $req->all();
// foreach($file as $pos){
// $id = $pos[1];
// $position = $pos[0];
// $menu = Menu::findOrFail($id);
// $menu->position = $position;
// $menu->save();
// }
}
After all this the console looks like the following :
please help me out fixing the issue
any help would be highly appreciated
Thanks in advance
Consider the following example.
$(function() {
$(".sort").sortable({
items: "> tbody > tr",
stop: function(event, ui) {
var parameter = $(this).sortable("toArray");
var position = [];
$.each(parameter, function(index, value) {
position.push(index + 1);
});
console.log(parameter, position);
$.ajax({
url: "{{ route('menu.savePosition') }}",
method: "POST",
data: {
"id": parameter,
"position": position
},
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.log(status, error);
}
});
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<table class="sort" width="340">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th>Status</th>
<td></td>
</tr>
</thead>
<tbody>
<tr id="item-1">
<td>Item 1</td>
<td>Link 1</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-1" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-2">
<td>Item 2</td>
<td>Link 2</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-2" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-3">
<td>Item 3</td>
<td>Link 3</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-3" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-4">
<td>Item 4</td>
<td>Link 4</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-4" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-5">
<td>Item 5</td>
<td>Link 5</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-5" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
It's not clear why you are sending the position as the Array of items will already be in the order of the items. I did include it just in case you do need it for something else.
It's easier to use the toArray method: https://api.jqueryui.com/sortable/#method-toArray You will also want to properly define the items so that Sortable knows what the items should be.
Try this way.
$('#element').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '/your/url/here'
});
}
});
Sorry for this noob question.
I have:
• different tabs in one webpage and
• each tab has a pagination
The problem is that when clicking a page in different pagination it would:
• lead to the same tab
Like i clicked page 2 in tab_2 pagination and I get redirected to tab_1 page 1
In my InventoryController:
public function index() {
return view('employee.inventory', [
'ingredients' => Ingredient::with('supplier')->paginate(10),
'products' => $products = Product::paginate(10, ['*'], 'products_page'),
'orders' => Order::paginate(10, ['*'], 'orders_page'),
'users' => User::paginate(10, ['*'], 'users_page'),
'suppliers' => Supplier::paginate(10, ['*'], 'suppliers_page')
]);
}
What should I do? I thought making each page in paginations behave like anchor tag that will jump to an id but I'm using {!! $object->links() !!} but I don't know how to implement it.
<div class="col-md-6">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs table-tabs" style="display: flex; flex-directed: row-reverse;">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Ingredients
</button>
</a></li>
<li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Products
</button>
</a>
</li>
<li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Orders
</button>
</a></li>
<li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Users
</button>
</a></li>
<li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Suppliers
</button>
</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Ingredients</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-1" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-1" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4"><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12">
<table id="table1" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th><input type="checkbox" name="checkAll" id=""></th>
<th>ID</th>
<th>NAME</th>
<th>QUANTITY IN STOCK</th>
<th>SUPPLIER</th>
<th>COST</th>
</tr>
</thead>
<tbody>
#foreach ($ingredients as $ingredient)
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>{{$ingredient->ingredient_id}}</td>
<td>{{$ingredient->name}}</td>
<td>{{$ingredient->stock_Quantity}}</td>
<td>{{$ingredient->supplier->name ?? '--unset--'}}</td>
<td>{{$ingredient->cost}}</td>
</tr>
#endforeach
</tbody>
</table></div></div>
<div class="row"><div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7">
{!! $ingredients->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="tab-pane" id="tab_2">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Products</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-2" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-2" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="table2" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" ><input type="checkbox" name="AllProducts" id=""></th>
<th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">ID</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >NAME</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >DESCRIPTION</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >QUANTITY</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >IMAGE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >PRICE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >CATEGORY(s)</th>
</tr>
</thead>
<tbody>
#foreach ($products as $product)
<tr role="row" class="odd">
<td><input type="checkbox" name="" id=""></td>
<td tabindex="0" class="sorting_1">{{$product->product_id}}</td>
<td>{{$product->name}}</td>
<td>{{$product->description}}</td>
<td>{{$product->stock_Quantity}}</td>
<td><img style="height: 100px; width: 150px;" src="{{ asset('storage/' . $product->image) }}" alt="{{ 'storage/' . $product->image }}"></td>
<td>{{$product->price}}</td>
<td>#</td>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7" >
{!! $products->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
Laravel pagination works on the basis of page number parameter in the url. For example, if I have a customers crud and I am on page two of crud the URL will be like:
http://localhost:8080/customers?page=2
So, if you are having two cruds on one page they will not work simultaneously. You should use any client side jquery pagination plugin in order to tackle this problem. Try this plugin:
jquery pagination plugin
I am trying to working on bootstrap data table in Laravel. My data is load successfully but data table search and pagination is not working.so please help me.
my Html code on page is like that
<table id="example111" class="table table-striped nowrap www" cellspacing="0" width="100%">
<thead>
<tr>
<th class="col-sm-2 col-lg-1">Sr.No.</th>
<th>Department Name</th>
<th class="col-sm-3 col-lg-2">Edit/Delete</th>
</tr>
</thead>
<tbody class="departmentlist" id="departmentlist111"></tbody>
</table>
my ajax call on page like that
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
table = $('#example111').DataTable({
paging: false,
});
table.destroy();
$('#example111').DataTable({
"serverSide": true,
"ajax": {
"url": "<?= URL::to('show_department')?>",
"dataType": "json",
"type": "post",
"data":{ _token: "{{csrf_token()}}"},
"dataSrc": function (e) {
$("#departmentlist111").html(e);
}
}
});
});
</script>
my route call on page is like
Route::post('show_department','admin\DepartmentController#show_department');
my controller call
public function show_department()
{
$cartdata = '<tr>
<td class="col-sm-2 col-lg-1"> 1</td>
<td >South Indian</td>
<td class="col-sm-3 col-lg-2">
<button type="button" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
<button type="button" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<tr>
<td class="col-sm-2 col-lg-1"> 1</td>
<td >South </td>
<td class="col-sm-3 col-lg-2">
<button type="button" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
<button type="button" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<tr>
<td class="col-sm-2 col-lg-1"> 1</td>
<td> Indian</td>
<td class="col-sm-3 col-lg-2">
<button type="button" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
<button type="button" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<tr>
<td class="col-sm-2 col-lg-1"> 1</td>
<td >South Indian</td>
<td class="col-sm-3 col-lg-2">
<button type="button" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
<button type="button" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>';
echo json_encode($cartdata);
}
so please solve my error please.
need help this my code javascript
function edit_kamar(Kode)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('kamar_view/ajax_edit')?>/"+Kode,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="Kode"]').val(data.Kode);
$('[name="Deskripsi"]').val(data.Deskripsi);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('FORM EDIT KAMAR'); // Set title to Bootstrap modal title
$('#Gambar-preview').show(); // show Gambar preview modal
if(data.Gambar)
{
$('#label-Gambar').text('GANTI GAMBAR'); // label Gambar upload
$('#Gambar-preview div').html('<img src="'+base_url+'upload/'+data.Gambar+'" class="img-responsive">'); // show Gambar
// $('#Gambar-preview div').append('<input type="checkbox" name="remove_Gambar" value="'+data.Gambar+'"/> Remove Gambar when saving'); // remove Gambar
}
else
{
$('#label-Gambar').text('UPLOAD GAMBAR'); // label Gambar upload
$('#Gambar-preview div').text('(No Gambar)');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
this my view code
<section class="content">
<!-- List View box -->
<div class="box xlist-view">
<div class="box-body table-scroll">
<!-- <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Refresh</button> -->
<br><br>
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th style="width:1px; font-size:12px; vertical-align: middle;" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> NO</FONT></th>
<th style="width:1px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> KODE</FONT></th>
<th style="width:1px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> RUANGAN</FONT></th>
<th style="width:1px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> KELAS</FONT></th>
<th style="width:1px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> KAMAR</FONT></th>
<th style="width:100px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF">JUMLAH TT</FONT></th>
<th style="width:100px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF">SISA TT</FONT></th>
<th style="width:1px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> TARIF</FONT></th>
<th style="width:100px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF">DESK</FONT></th>
<th style="width:100px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> IMAGE</FONT></th>
<th style="width:100px; font-size:12px; vertical-align: middle;" style="font-size:10px" bgcolor="#00a65a"><center><FONT COLOR="#FFFFFF"> KONTROL</FONT></center> </th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
foreach($displaykamar as $book)
{
$no++;
?>
<tr>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $no;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $book->Kode;?></td>
<td style="font-size:12px; vertical-align: middle; "><center><?php echo $book->Ruangan;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $book->Kelas;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $book->Kamar;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $book->JumlahTT;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo $book->SisaTT;?></td>
<td style="font-size:12px; vertical-align: middle;"><center><?php echo number_format($book->Tarif,2,",",".")?></center></td>
<td style="font-size:12px; vertical-align: middle;"><?php echo $book->Deskripsi;?></td>
<?php
if($book->Gambar)
// echo '<td width="10%"><center><img src="base_url('upload/'.$book->Gambar)" class="img-responsive" width="85px" height="85px" /></a></center></td>';
echo '<td width="10%"><center><img src="'.base_url('upload/'.$book->Gambar).'" class="img-responsive" width="85px" height="85px"></center></td>';
else
echo '<td width="10%"><center><img src="'.base_url('upload/noimage_kamar.png').'" class="img-responsive" width="75px" height="75px"></center></td>';
// echo '<td width="10%"><center><img src="upload/noimage_kamar.png" class="img-responsive" width="75px" height="75px" /></center></td>';
?>
<td style="vertical-align: middle;"><center>
<button class="btn btn-warning" onclick="edit_kamar(<?php echo $book->Kode;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
<!-- <button class="btn btn-warning" href="javascript:void(0)" title="Edit" onclick="edit_kamar(<?php echo $book->Kode;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" onclick="delete_book(<?php echo $book->Kode;?>)"><i class="glyphicon glyphicon-remove"></i></button> -->
</td>
</tr>
<?php }?>
</tbody>
<tfoot>
</tfoot>
</table>
<!-- <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Refresh</button> -->
</div>
</div>
this is the error:
localhost:8080/Simrsgum1/kamar_view/ajax_edit/2.16100001161e+24
An Error Was Encountered
The URI you submitted has disallowed characters.
cause i think the link should get all of number not get cut
should like this maybe :
localhost:8080/Simrsgum1/kamar_view/ajax_edit/2161000011610000116100001
TRY THIS CODE.
Please open your config.php file and then find this
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_-';
And then you need to set the value to blank
$config['permitted_uri_chars'] = '';
And after that try again and your script working fine.