I am working on a Laravel and Bootstrap project and currently doing the update feature for multiple rows by using a modal at a time.
I have a table with a checkbox in each row :
<?php $No = 1; ?>
<table id="tbl_pengadaan" class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th ><input type="checkbox" name="cb_all" id="checkall"></th>
<th >No</th>
<th >No PR</th>
<th >PR Line</th>
<th >Shopping Cart</th>
<th >PR Received Date</th>
<th >PGr</th>
<th >No Material</th>
<th style="width: 400px">Nama Material</th>
<th >Qty</th>
<th >UoM</th>
<th >Unit Price</th>
<th >Total Budget</th>
<th >PR Currency</th>
<th >No RFx</th>
<th style="width: 250px">Judul RFx</th>
<th >Tgl RFx</th>
<th >Submission Deadline</th>
<th >Tgl Opening Tender</th>
<th >TE Mulai</th>
<th >TE Sampai</th>
<th >Negosiasi Mulai</th>
<th >Negosiasi Sampai</th>
<th >Klarifikasi Mulai</th>
<th >Klarifikasi Sampai</th>
<th >No PO</th>
<th >PO Line</th>
<th >Created at</th>
<th >Updated at</th>
#role('admin')
<th>Action</th>
#endrole
</tr>
</thead>
<tbody>
#foreach($pengadaans as $row)
<tr>
<!-- <td>{{$row->id}}</td> -->
<td>
<input type="checkbox" name="cb_mark" id="cb{{$No}}"
data-target="#modal-edit-pengadaan"
data-pr_no="{{$row->pr_no}}"
>
</td>
<td>{{$No}}</td>
<td>{{$row->pr_no}}</a></td>
<td>{{$row->pr_line}}</td>
<td>{{$row->shopping_cart}}</td>
<td>{{ \Carbon\Carbon::parse($row->transfer_date)->format('d-M-Y') }}</td>
<td>{{$row->pgr}}</td>
<td>{{$row->no_material}}</td>
<td>{{$row->nama_material}}</td>
<td align="right">{{$row->quantity}}</td>
<td>{{$row->uom}}</td>
<td align="right">{{number_format($row->unit_price,2)}}</td>
<td align="right">{{number_format($row->total_budget,2)}}</td>
<td>{{$row->pr_cur}}</td>
<td>{{$row->rfx}}</td>
<td>{{$row->rfx_title}}</td>
<td style="white-space: nowrap">{{ $row->rfx_date ? \Carbon\Carbon::parse($row->rfx_date)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->sub_deadline ? \Carbon\Carbon::parse($row->sub_deadline)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->tgl_opening ? \Carbon\Carbon::parse($row->tgl_opening)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->te_start ? \Carbon\Carbon::parse($row->te_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->te_to ? \Carbon\Carbon::parse($row->te_to)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->nego_start ? \Carbon\Carbon::parse($row->nego_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->nego_to ? \Carbon\Carbon::parse($row->nego_to)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->clarification_start ? \Carbon\Carbon::parse($row->clarification_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->clarification_to ? \Carbon\Carbon::parse($row->clarification_to)->format('d-M-Y') : "" }}</td>
<td>{{$row->po_no}}</td>
<td>{{$row->po_line}}</td>
<td style="white-space: nowrap">{{$row->created_at}}</td>
<td style="white-space: nowrap">{{$row->updated_at}}</td>
<td>
hapus
</td>
</tr>
<?php $No++; ?>
#endforeach
</tbody>
</table>
I want to pass some data from the checked rows to a modal. Here is the code of the modal :
<!-- [start] Modal edit pengadaan -->
<div class="modal fade" id="modal-edit-pengadaan">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content" style="top: 100px">
<form method="post" action="pengadaan/update">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit data pengadaan</h5>
</div>
<div class="modal-body">
{{ csrf_field() }}
<table>
<tr>
<th>No PR</th>
</tr>
<!--
<tr>
<td><input type="text" class="form-control" name="no_pr" id="no_pr" value="no_pr (based on checked row)"></td>
</tr>
-->
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- [end] Modal edit pengadaan -->
Here is my button that trigger the modal
<button type="button" style="float:right; margin-right: 3px" class="btn btn-info" data-toggle="modal" data-target="#modal-edit-pengadaan">
<i class="fa fa-pencil"></i> Edit Selected
</button>
And here is my javascript code :
$('#modal-edit-pengadaan').on('show.bs.modal', function (event) {
var rowCount = ($('#tbl_pengadaan tr').length)-1;
console.log('test' + rowCount);
if ( event.relatedTarget != null) {
var button = $(event.relatedTarget) // Button that triggered the modal
var cbrow = document.getElementById("cb1");
}
var no_pr = cbrow.data('pr_no')
var modal = $(this)
//modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body #jlh_row').text(no_pr)
})
I want to make the table row in the Modal can be generated based on checked rows.
Thanks in advance
So the steps with are this:
Store the modal element to append your rows to in a variable var modalRowContent = //your selector
Find the checked th elements
Find their parent rows tr
Append the rows to modalRowContent
The code may look something like:
var modalRowContent = $('#sectionToAppendTo'); // 1
var checkedRows = $('th input:checked').closest('tr'); //2 + 3
modalRowContent.append(checkedRows);// 4
Or you can chain it all
// 1 // 4 // 2 // 3
$('#sectionToAppendTo').append( $('th input:checked').closest('tr') );
NOTE: I haven't tested this code. Please do not consider this a working answer.
Related
I am using data tables to show data and a button is present opposite to each entry of my data table.
That button has onclick which captures the parameter present in a row and save in array.
I want to change color when certain entry is selected and reset on deselect.
Here is what I am doing,
function select(name){
var property = document.getElementByClassName('checkRule');
if( rArray.includes(name) ){
property.style.backgroundColor = "#FFFFFF"
const index = rArray.indexOf(name);
if (index > -1) {
rArray.splice(index, 1);
}
}else{
rArray.push(name);
property.style.backgroundColor = "#28a0ff"
}
console.log('ARRAY >> ', rArray);
}
HTML
<div class="col-12 table-design">
<div class="row panel panel-default c-panel">
<div class="panel-heading c-phead">EMPLOYEE LIST</div>
<div class="panel-body">
<table class="table table-striped" id="c_table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Employer</th>
<th scope="col">Checked/Unchecked</th>
</tr>
</thead>
<tbody>
<c:forEach items="${e_list}" varStatus="status" var="emp">
<tr>
<td>${status.index + 1}</td>
<td>${emp.getEmpName()}</td>
<td>${emp.getEmployer()}</td>
<td>
<button type="button" class="custom-control-input checkRule" id="checkRule" onclick="selectRule('${emp.getEmpName()}')"></button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
This code is only changing color of very first element of of data table.
How shall I make it work?
I would recommend changing the background color using closest and toggle -
function select(element) {
element.closest("tr").classList.toggle("colored-bg");
// Additional code to store in array if required
}
.colored-bg {
background-color: #28a0ff;
}
<div class="col-12 table-design">
<div class="row panel panel-default c-panel">
<div class="panel-heading c-phead">EMPLOYEE LIST</div>
<div class="panel-body">
<table class="table table-striped" id="c_table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Employer</th>
<th scope="col">Checked/Unchecked</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>emp1</td>
<td>
<button type="button" class="custom-control-input checkRule" id="checkRule" onclick="select(this)">Click</button>
</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>emp2</td>
<td>
<button type="button" class="custom-control-input checkRule" onclick="select(this)">Click</button>
</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>emp3</td>
<td>
<button type="button" class="custom-control-input checkRule" onclick="select(this)">Click</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Please see the below solution.
Add extra unique key with id see your id parameter below
Pass extra unique key with onclick event as second param
get that second param in your js function and add that in getElemetById.
function select(name,***Uid***){
var property = document.getElementById('checkRule'***+Uid***);
if( rArray.includes(name) ){
property.style.backgroundColor = "#FFFFFF"
const index = rArray.indexOf(name);
if (index > -1) {
rArray.splice(index, 1);
}
}else{
rArray.push(name);
property.style.backgroundColor = "#28a0ff"
}
console.log('ARRAY >> ', rArray);
}
<button type="button" class="custom-control-input checkRule" id="checkRule***${status.index + 1}***" onclick="selectRule('${emp.getEmpName()}','${status.index + 1}')"></button>
I'm using Bootstrap 4 table inside a collapse, I want to search for a value in the table and if the value is found, open the collapse and show me the row with the value.
<div id="collapseStudents" class="collapse ml-4" aria-labelledby="headingOne" data-parent="#accordionTypes">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col" class="text border-bottom">N.</th>
<th scope="col" class="text border-bottom">Classe</th>
<th scope="col" class="text border-bottom">Nome e Cognome</th>
<th scope="col" class="text border-bottom">Ruoli</th>
</tr>
</thead>
<tbody>
{% for number, data in students_table.items() %}
<tr>
<th scope="row" class="text">{{number}}</th>
<td class="text"><span class="badge badge-secondary">{{data['class']}}</span></td>
<td class="text">{{data['name']}}</td>
<td class="text roles" style="width: 30%">
<span class="badge badge-danger align-text-top ml-1 admin-chip" style="display: {{none if not 'admin' in data['roles'] else block}}; position: relative; top: 2px;">Admin <a class="text-light chip" href=""><i class="fa fa-times" aria-hidden="true" style="position:relative;top:0.3px" data-role="admin" data-user="{{data['name'] + '-' +number}}"></i></a></span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
You can try with the following script:
$('.table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
if($(this:contains('valueToSearch'))){
$('#collapseStudents').collapse();
// here you can set how to show the row, ex. as bold text
$(this).text('<b>' + $(this).text() + '</b>');
}
});
});
This is the div that contains the HTML with the list:
<div id="searchResults" class="container-fluid">
<table ng-show="HasMyData()" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="text-center smalltext bold">Version</th>
<th class="text-center smalltext bold">City</th>
<th class="smalltext bold">Description</th>
<th class="text-center smalltext bold">Food</th>
<th class="text-center smalltext bold">Lizard</th>
<th class="text-center smalltext bold">Lost</th>
<th class="text-center smalltext bold">Complete</th>
<th class="text-center smalltext bold">Active</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;" ng-class="{ selectedrow: isSelectedReg($id) }" ng-click="GetDetails(data,$id)" ng-show="numberOfRecords != 0"
ng-repeat="data in myData |
filter:{'name':FilterByDescription(search.val)} |
filter:{'isFood':FilterIsFood} |
filter:{'isLizard':FilterIsLizard} |
filter:{'isLost':FilterIsLost} |
filter:{'reviewCompleted':FilterByComplete()} |
filter:{'activeInd':FilterByInactive() }">
<td class="text-center smalltext">{{data.versionNumber}}</td>
<td class="text-center smalltext">{{data.cityName}}</td>
<td class="smalltext">{{data.name}}</td>
<td class="text-center"><input type="checkbox" ng-checked="data.isFood" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLizard" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLost" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.reviewCompleted" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.activeInd" disabled></td>
</tr>
<tr ng-show="numberOfRecords == 0">
<td colspan="5">NO RECORDS FOUND</td>
</tr>
</tbody>
</table>
</div>
The data is updated via a form, and then the above div/ng-repeat should be reloaded after the update. I've read a few posts that say it should be automatic...but it's not happening.
This might be a nooby question,but I have not found anything online to how to do this.
I have a table that shows a leader-board for highest points.
This is how it looks:
I need to get a count for each row that there is a username, so if there is 23 records in that table, then I need 1-23 displayed on the left where the # is at.
I tried using this:
#for ($i = 0; $i < 10; $i++)
{{ $i }}
#endfor
in my table:
<table class="ui celled striped selectable inverted table">
<thead>
<tr>
<th colspan="3" class="center aligned">
Leaderboards
</th>
</tr>
<tr>
<th>#</th>
<th class="center aligned">Username</th>
<th class="center aligned"><i class="fa fa-diamond"></i> Points</th>
</tr>
</thead>
<tbody>
#foreach ($points as $point)
<tr>
<td>
#
</td>
<td class="center aligned"> {{ $point->username }}</td>
<td class="center aligned"><i class="fa fa-diamond"></i> {{ $point->points }}</td>
</tr>
#endforeach
</tbody>
</table>
But I keep on getting a loop from 1-10 in ONE row
Initialize a counter variable $i and increment it at the end of your loop, like this:
<table class="ui celled striped selectable inverted table">
<thead>
<tr>
<th colspan="3" class="center aligned">
Leaderboards
</th>
</tr>
<tr>
<th>#</th>
<th class="center aligned">Username</th>
<th class="center aligned"><i class="fa fa-diamond"></i> Points</th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($points as $point)
<tr>
<td>
# {{ $i }}
</td>
<td class="center aligned"> {{ $point->username }}</td>
<td class="center aligned"><i class="fa fa-diamond"></i> {{ $point->points }}</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
i have created a table (using datatables) and in the table a few actions. in the table i have a button to do a function "delete", also using datatables i get pagination.. So for example i am at page 5, and i want to delete a row when i click delete it refreshes the page and goes back to page no 1. How can i make it remain at page 5 after the action delete? Below are my table and controller function
viewStatistics.blade:
<table class="table table-hover demo-table-search table-responsive-block alt-table" id="tableWithSearch">
<thead>
<tr>
<th class="text-center" style="width:80px;">ID</th>
<th class="text-center">Date</th>
<th class="text-center">Question <br> Asked</th>
<th class="text-center">Low <br> Confidence</th>
<th class="text-center">No <br> Answer</th>
<th class="text-center">Missing <br> Intent</th>
<th class="text-center">Webhook <br> Fail</th>
<th class="text-center">Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
#foreach($data as $sessionID => $value)
<tr>
<td class="text-center">{{$value['identifier']}}</td>
<td class="text-center">{{date("d M", strtotime($value['dateAccess']))}}</td>
<td class="text-center">{{$value['total']}}</td> <!-- question asked -->
<td class="text-center">{{$value['low confidence']}}</td> <!-- low confidence -->
<td class="text-center">{{$value['no answer']}}</td> <!-- no answer -->
<td class="text-center">{{$value['missing intent']}}</td> <!-- missing intent -->
<td class="text-center">{{$value['webhook fail']}}</td> <!-- webhook fail -->
<td class="text-center" style="{{$value['status'] == 'Reviewed' ? 'color:green' : 'color:red'}}">
{{$value['status']}}
#if($value['status'] == 'Pending')
<input type="checkbox" name="check" class="check" value="{{$sessionID}}">
#endif
</td> <!-- status -->
<td class="text-center">
<div class="btn-group">
<button type="button" class="btn alt-btn alt-btn-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Manage</button>
<ul class="dropdown-menu">
<li>
View
</li>
<li>
Delete
</li>
#if($value['status'] == 'Pending')
<li>
Mark as Done
</li>
#endif
</ul>
</div>
</td> <!-- action -->
</tr>
#endforeach
</tbody>
</table>
Controller:
public function deleteStatistics($companyID, $sessionID)
{
DiraChatLog::where('company_id', $companyID)->where('sessionID', $sessionID)->delete();
return redirect(action('AltHr\Chatbot\TrackerController#viewStatistics', compact('companyID')))->with('notification',[
'status' => 'success',
'title' => 'Statistics Deleted',
'message' => 'The Statistics have been deleted.'
]);
}
There is an option named stateSave in jquery datatables. Please check the code below:
$('#example').dataTable({ stateSave: true });