Get Id of Current Row in Grid - php

I'm trying to get the Current Row of ID st Edit Icon
Please find the TableWidgets files as in below link
https://drive.google.com/folderview?id=0BwtwIV52Ve6kRFBJdkFCY0NvQUk&usp=sharing
Index.php
<script type="text/javascript">
$(document).ready(function() {
$('#list-grid table td div [action=tw-edit]').click(function(event) {
var rowId =$(this).closest("div.list-grid").attr("id");
alert (rowIdx);
});
});
</script>
<?php $this->beginWidget('application.widgets.TableWidget',
array(
'dataProvider'=>$dataProvider,
'fixedHead' => true,
'id' => 'list-grid',
));
?>
<?php $this->endWidget(); ?>
Grid.HTML
<div id="list-grid" class="box nominimize tablewidget" url/default/index">
<div class="content noPad">
<div class=" table-for-split" heightforsplit="200px">
<table class="table table-bordered">
<thead>
<tr>
<th class=" sorting" sortfield="id"></th>
<th class=" sorting" sortfield="dateordered"></th>
<th class="" sortfield="qty"></th>
<th class=" sorting" sortfield="tag"></th>
<th class="" sortfield="is_active"></th>
<th class="" sortfield="created"></th>
<th class="" sortfield="createdby"></th>
<th class="" sortfield="description"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td> action=tw-edit</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
Please anyone help to resolve this.

Related

Adding pagination to a table using Datatables

I am updating a plugin for WordPress using .php files. I have an update that requires a table and pagination. I'm trying to use jQuery for this.
I followed the datatable instructions but I am not seeing any changes applied. What am I doing wrong? I have added the jQuery to use the correct table id. Nothing seems to work doing this.
I am attempting to run through the data and allow the page to paginate. I do not care about having the option for user to select number of items on page at given time.
I am looking for an easy way to paginate a HTML table. Nothing I've tried seems to work
jQuery(document).ready(function() {
jQuery('#engine-search-table').DataTable();
});
<div class="parts-table">
<table id="engine-search-table" class="display">
<thead>
<tr id="header-row">
<th class="table-header">
<h4>Manufacturer</h4>
</th>
<th class="table-header">
<h4>Model</h4>
</th>
<th class="table-header">
<h4>Description</h4>
</th>
<th class="table-header">
<h4>Series</h4>
</th>
<th class="table-header">
<h4>Engine</h4>
</th>
<th class="table-header">
<h4>Years</h4>
</th>
<th class="table-header">
<h4>Begin Serial</h4>
</th>
<th class="table-header">
<h4>Engine Serial</h4>
</th>
</tr>
</thead>
<tbody>
<?php
if (!empty($parts)) {
foreach ($parts as $part) {
$meta = get_post_meta($part->ID); ?>
<tr id="data" class="parts-row">
<td class="part-container-title">
<?php printCFTVal($meta, 'manufacturer');?>
</td>
<td class="part-container-manufacturer">
<a href='<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'model'); ?>
</a>
</td>
<td class="part-container-category">
<?php printCFTVal($meta, 'description'); ?>
</td>
<td class="part-container-excerpt">
<?php echo str_replace('OVERVIEW', '', get_the_excerpt($part)); ?>
</td>
<td class='part-container-button'>
<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'enginemodel'); ?>
</td>
<td>
<?php printCFTVal($meta, 'years');?>
</td>
<td>
<?php printCFTVal($meta, 'beginSerial');?>
</td>
<td>
<?php printCFTVal($meta, 'engineserial');?>
</td>
</tr>
<?php }
} else {
echo '<p>No parts found.</p>';
} ?>
</tbody>
</table>
</div>

how to download pdf for a line from a table in laravel

i want to generate pdf from the database for 1 row in a table , the table name is "listings"
i used that script for the controller :
class CreatePdfController extends Controller
{
public function pdfForm(Request $request,$id){
$listing = Listing::findOrFail($id);
view()->share('listing',$listing);
if($request->has('download')){
$pdf = PDF::loadView('pdf_download');
return $pdf->download('pdf_download.pdf');
}
return view('show_details')->with('listing', $listing);
}
}
and for the show_details its the view where can i fetch just the data for 1 line in the table :
<div class="col-sm-8 offset-sm-2">
Download PDF
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header col-xs-6">
<div class="col-xs-3">
<h2>Listing Ref n° :{{$listing->id}}</h2>
{{$listing->owner->owner_lastname}}</h4>
</div>
<div class="col-xs-3">
<img src="{{ asset('/assets/images/listings/'.$listing->listing_Fimage) }}" width="120px" height="100px" alt="image" >
</div>
</div>
<div class="card-body">
<div class="col-xs-7 well">
<table id="example1" class="table table-bordered">
<thead>
<tr>
<th scope="row">listing_title:</th>
<td>{{$listing->listing_title}}</td>
</tr>
<tr>
<th scope="row">listing_type:</th>
<td>{{$listing->listing_type}}</td>
</tr>
<tr>
<th scope="row">listing_purpose:</th>
<td>{{$listing->listing_purpose}}</td>
</tr>
<tr>
<th scope="row">listing_location:</th>
<td>{{$listing->listing_location}}</td>
</tr>
<tr>
the pdf_download is the view that i want to generated as pdf :
<table id="example1" class="table table-bordered">
<thead>
<tr>
<th scope="row">listing_title:</th>
<td>{{$listing->listing_title}}</td>
</tr>
<tr>
<th scope="row">listing_type:</th>
<td>{{$listing->listing_type}}</td>
</tr>
<tr>
<th scope="row">listing_purpose:</th>
<td>{{$listing->listing_purpose}}</td>
</tr>
<tr>
<th scope="row">listing_location:</th>
<td>{{$listing->listing_location}}</td>
</tr>
<tr>
<th scope="row">listing_emirate:</th>
<td>{{$listing->listing_emirate}}</td>
</tr>
<tr>
<th scope="row">listing_community:</th>
<td>{{$listing->listing_community}}</td>
</tr>
<tr>
<th scope="row">listing_price:</th>
<td>{{$listing->listing_price}}</td>
</tr>
</table>
and the route that i passed is :
Route::get('/show_details/{id}' ,array('as'=>'show_details',
'uses'=>'CreatePdfController#pdfForm'));
the problem is i get that error and i cannot download the pdf file :
**Symfony\Component\ErrorHandler\Error\FatalError
Maximum execution time of 60 seconds exceeded
http://127.0.0.1:8000/show_details/3?download=pdf**

Bootstrap datatable not working on adding accordion

I have a datatable as follows:
foreach($tickets as $tickets)
{
echo ('<tr>');
echo ('<td>'.$tickets->error.'</td>');
echo ('<td>'.$tickets->hours.'</td>');
echo ('<td>'.$tickets->time.'</td>');
echo ('<td>'.$tickets->date.'</td>');
echo ('</tr>');
}
I added accordion effect to it likewise:
foreach($tickets as $tickets)
{
echo ('<tr data-toggle="collapse" data-target=".demo1">');
echo ('<td>'.$tickets->error.'</td>');
echo ('<td>'.$tickets->hours.'</td>');
echo ('<td>'.$tickets->time.'</td>');
echo ('<td>'.$tickets->date.'</td>');
echo ('</tr>');
echo ('<tr>');
echo ('<td class="hiddenRow">');
echo ('<div class="collapse demo1">Demo1</div>');
echo ('</td>');
echo ('</tr>');
}
and the table has lost it's datatable properties such as search, view as 10/25/50 items per page etc.
Jquery:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
$(".clickable-row").click(function() {
window.location = $(this).data("href");
});
I'd like help regarding this issue.
Try using colspan="4" on the second td
Here is fiddle: http://jsfiddle.net/3ghbLrpu/1/
<html>
<head>
<script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr data-toggle="collapse" data-target=".demo1" class="accordion-toggle">
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td class="hiddenRow" colspan="4">
<div class="collapse demo1">Demo1</div>
</td>
</tr>
</tbody>
</table>
</body>
CSS
.hiddenRow {
padding: 0 !important;
}
Another option is use bootstrap and remove knockoutjs
https://codepen.io/creativedev/pen/XYMRyQ
$(document).ready(function() {
$("#collapseme").click(function() {
if($("#test").hasClass("out")) {
$("#test").addClass("in");
$("#test").removeClass("out");
} else {
$("#test").addClass("out");
$("#test").removeClass("in");
}
});
});
HTML
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="" id="collapseme">
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td class="hiddenRow" colspan="4">
<div class="collapse out" id="test">Demo1</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</tfoot>
</table>

Expand immidiate next even rows onclicking odd rows using jquery

I want to create table like in this site:
https://www.avast.com/en-in/exploit-protection.php
I tried with below code but something is happening wrong , I am beginner of jquery.Reading data from mysql php to show.
HTML:
$(document).ready(function(){
$("#myTable tr:odd").addClass("odd");
$("#myTable tr:not(.odd)").hide();
$("#myTable tr:first-child").show();
});
$(document).ready(function(){
$("#myTable tr").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ='myTable' class='tablesorter' style='table-layout:fixed;'>
<thead>
<tr>
<th class='header' width='4%'>Wild</th>
<th class='header ' width='12%'>Release Date</th>
<th class='header' width='12%'>Exploit Name1</th>
<th data-sorter='false' width='18%'>Name2</th>
<th data-sorter='false' width='53%'>Comments</th>
<th data-sorter='false' width='1%'></th>
</tr>
</thead>
<tbody>
<tr>
<td> <i hidden>1</i><img src='ex.png' alt='' border=3 height=25 width=25></img>
</td>
<td>03/11/2015</td>
<td><b> CVE-2015-1623</b></td>
<td style='word-wrap:break-word;'>
<ul>
<li>ABC</li>
<li>XYZ</li>
<li>PQR</li>
</ul>
</td>
<td style='word-wrap:break-word;'>
Microsoft Internet Explorer 11 allows remote attackers to execute arbitrary code or cause ...
</td>
<td>
<div class='arrow'></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<b>Link: </b>
<ul>
<li><a href =http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623 target ='_blank'>http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623<br></a></li>
</ul>
</td>
<td></td>
</tr>
<tr>
Please let me know what is wrong in jquery.

How to layout of the table is not broken when resize browser or run on mobile

I have problem with table (html-bootstrap). When I resize the browser and then it has been broken Like image below:
Table Display at the first time, when i'm not resize browser
After resize browser, It has got problem like this image
This is my src html table and recently I have no solution for this, Plz help me to resolve it.
<div class="row">
<div class="box col-md-12">
<div class="box-inner">
<div class="box-header well" data-original-title="">
<h2><i class="glyphicon glyphicon-list"></i> TimeSheet List</h2>
<div class="box-icon">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
</div>
<div class="box-content">
<table class="table table-bordered">
<tbody>
<tr>
<th>TS ID</th>
<th>Username</th>
<th>Timesheet Date</th>
<th>Date Approved</th>
<th>From Time</th>
<th>To Time</th>
<th>Activity</th>
<th>Division</th>
<th>Department</th>
<th>Approved By</th>
<th colspan="2"><strong>Actions</th>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="3">Vasu</td>
<td rowspan="3">2015-02-17</td>
<td rowspan="3">2015-02-18</td>
<td>08:30</td>
<td>10:30</td>
<td>CS8743</td>
<td rowspan="3">Service</td>
<td rowspan="3">Department 1</td>
<td rowspan="3">Jimmy</td>
<td colspan="2" rowspan="3">View</td>
</tr>
<tr>
<td>10:30</td>
<td>12:30</td>
<td>CS3474</td>
</tr>
<tr>
<td>13:30</td>
<td>17:30</td>
<td>Help</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">Jack</td>
<td rowspan="2">2015-02-18</td>
<td rowspan="2">2015-02-19</td>
<td>08:30</td>
<td>12:30</td>
<td>Idle</td>
<td rowspan="2">Hoseshop</td>
<td rowspan="2">Department 2</td>
<td rowspan="2">Jimmy</td>
<td colspan="2" rowspan="2">View</td>
</tr>
<tr>
<td>13:30</td>
<td>17:30</td>
<td>CS001</td>
</tr>
<tr>
<td>3</td>
<td>Tim</td>
<td>2015-02-19</td>
<td>2015-02-20</td>
<td>08:30</td>
<td>17:30</td>
<td>CS002</td>
<td>Driver</td>
<td>Department 3</td>
<td>Jimmy</td>
<td colspan="2">View</td>
</tr>
<tr>
<td>4</td>
<td>Huey</td>
<td>2015-02-20</td>
<td>2015-02-21</td>
<td>08:30</td>
<td>17:30</td>
<td>CS003</td>
<td>Project</td>
<td>Department 4</td>
<td>Jimmy</td>
<td colspan="2">View</td>
</tr>
<tr>
<td>5</td>
<td>Hudo</td>
<td>2015-02-21</td>
<td>2015-02-22</td>
<td>08:30</td>
<td>17:30</td>
<td>Help</td>
<td>Piping</td>
<td>Department 5</td>
<td>Jimmy</td>
<td colspan="2">View</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Plz. Help me!
Wrap the table in a div with the .table-responsive class. This will make the table scroll on smaller screens, but without making the whole page scroll.
<div class="table-responsive">
<table class="table table-bordered">...</table>
</div>
Docs: http://getbootstrap.com/css/#tables-responsive
Use table-responsive CSS bootstrap class in your <table> element like so:
<table class="table table-bordered table-responsive">

Categories