Add external javascript library for Zendfreamework project - javascript

i want to add DataTable javascript lib to my Zendframe work project.So is that possible to add external data lib to ZendFrame work? and how can i add DataTable lib to my zend project?
view.phtml
<script type="text/javascript">
var baseUrl = "<?php echo $this->baseUrl(); ?>";
$(document).ready(function(){
$('.jbutton').button();
});
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
<span id="edit-doctor" class="jbutton floatright marr5">
<a href="<?php
echo $this->url(
array(
'controller' => 'patients',
'action' => 'edit',
'id' => $this->patientId
), 'default', true
);
?>">Edit Patient</a>
</span>
<div class="clear"></div>
<?php $user = $this->user; ?>
<h1 class="title"><?php echo $user['name']; ?></h1>
<div class="underling-green"></div>
<div class="profile">
<div class="p-image">
<img src="<?php echo $this->baseUrl() . '/images/users/' . $user['image']; ?>"/>
</div>
<div class="category mart50">
<div class="sub-title">Personal Details</div>
<table>
<tbody>
<tr>
<td class="p-title">Email</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['email']; ?>
</td>
</tr>
<tr>
<td class="p-title">Birth Day</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['bday']; ?>
</td>
</tr>
<tr>
<td class="p-title">Telephone</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['telno']; ?>
</td>
</tr>
<tr>
<td class="p-title">Address</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['address']; ?>
</td>
</tr>
</tbody>
</table>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
i want to make "example" table preview as DataTalbe how can i do it?


Just put the lib and jQuery or any other required js libs in .e.g. public/js and then in your layout.phtml (in head section) you do as follows:
$this->headScript()->prependFile($this->baseUrl('/js/jquery-version.js'));
$this->headScript()->appendFile($this->baseUrl('/js/datatableLib.js'));
echo $this->headScript();

Related

How I can Bootstrap data table filter with php foreach

Table 1 and 2 picture it work only table 1 data filter:
I want to short data after click on table title when I try with while loop SQL data result can filter the data. If I try on PHP function foreach data table can't filter and I unable to click on edit and delete buttom...
Code For table 1 I use like this
<table id="example1" class="table table-bordered">
<thead>
<th>Courses ID</th>
<th>Photo</th>
<th>Name</th>
</thead>
<tbody>
<?php
include 'dbconn/conn.php';
$sql = "SELECT *, students.id AS id FROM students LEFT JOIN position ON position.id=students.course_id LEFT JOIN schedules ON schedules.id=students.schedule_id";
$query = $conn->query($sql);
while($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['cardid']; ?></td>
<td><img src="<?php echo (!empty($row['photo']))? 'images/'.$row['photo']:'./images/profile.jpg'; ?>" width="30px" height="30px"> <span class="fa fa-edit"></span></td>
<td><?php echo $row['firstname'].' '.$row['lastname']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Code for second table that data pull from function but filter icon didn't show
<table id="example2" class="table table-bordered">
<thead>
<th>Students ID</th>
<th>Photo</th>
<th>Name</th>
<th>Course</th>
<th>Semester</th>
<th>Admittion On</th>
<th>Update</th>
</thead>
<tbody>
<?php
$cust_list = $dbquery->studentinfo();
foreach($cust_list as $custDetails){
echo '
<tr>
<td>'.$custDetails['cardid'].'</td>
<td><img src="images/'.$custDetails['photo'].'" width="30px" height="30px"> <span class="fa fa-edit"></span></td>
<td>'.$custDetails['firstname'].' '.$custDetails['lastname'].'</td>
<td>'.$custDetails['description'].'</td>
<td>'.date('M d, Y', strtotime($custDetails['created_on'])).'</td>
<td>
<a href="#edit" data-toggle="modal" class="btn btn-success btn-sm edit btn-flat" data-id="'.$custDetails['id'].'">
<i class="fa fa-edit"></i> Edit</button></a>
<a href="#delete" data-toggle="modal" class="btn btn-danger btn-sm delete btn-flat" data-id="'.$custDetails['id'].'">
<i class="fa fa-trash"></i> Delete</button></a>
</td>
</tr>
';
}
?>
</tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').dataTable();
} );
</script>
More Info -> https://datatables.net/

How can I embed a datatable in a php drawn table?

<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/jquery.dataTables.min.css">
Here is the attached CSS, and I also tried using CDN for both styles and Scripts and still it is not showing filters from data table CSS.
<table style="border-color:cadetblue;" id="dt_basic" class="table table-striped table-hover m-0 rounded-pill display dataa">
<tr class="nasiabg2 table-active text-white border-1 border-light">
<!--<th class="text-white">Reference</th>-->
<th class="text-white">Fund Name</th>
<th class="text-white">NaSIA Classification</th>
<th class="text-white">Initial Fees</th>
<th class="text-white">Max Initial Fees</th>
<th class="text-white">NAV</th>
</tr>
<tbody class="border-light"> <?php for ($j=0;$j<$fDaily->num_rows();$j++) {?> <tr>
<td> <?php echo $fDaily->row($j)->fund;?> </td>
<td> <?php echo $fDaily->row($j)->asset_class." - ".$fDaily->row($j)->style." - ".$fDaily->row($j)->region;?> </td>
<td> <?php echo $fDaily->row($j)->init_fee;?> </td>
<td> <?php echo $fDaily->row($j)->max_ann_fee;?> </td>
<td> <?php echo $fDaily->row($j)->nav;?> </td>
</tr> <?php }?> </tbody>
</table>
Here is my table with the below Javascript.
<script src="assets/libs/bootstrap/dist/js/jquery-3.5.1.js"></script>
<script src="assets/libs/bootstrap/dist/js/jquery.dataTables.min.js"></script>

According to the official Datatable documentation you should follow the following structure :
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>

How to calculate the previous row and show in the current row of the table?

I am fetching some data from the table using codeigniter
My table picture
This is my table that i have fetched from the table.in this i have show the balance column in first row as 10 and next row as 35 how i calculate this using java script or php itself.
My code:
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty']; ?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>
This is my table code.
My another sample table:

Define $balance before foreach, and sum as $balance += $total; every row of balance column.
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php
$balance = 0;
foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty'];
$balance += $total;
?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>

Data Table search is giving error

I'm getting a warning saying requested unknown parameter, and after I press ok the search is not working correctly.
any solution for this
DataTable warning .......... Requested unknown parameter
Please find how i created the table
<table class="dataTable border bordered striped" data-role="datatable" data-auto-width="false" id="brandTable">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc">ID</td>
<td class="sortable-column">Brand Name</td>
<td class="sortable-column">Account Manager</td>
<td class="sortable-column">Date Updated</td>
</tr>
</thead>
<tbody>
<?php foreach ($fw->customer($_SESSION['USERID'])->getAllBrands() as $v) { ?>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>
<?php echo $v['id']; ?>
</td>
<td>
<a href="updateBrands.html?id=<?php echo $v['id']; ?>">
<?php echo $v['brandName']; ?>
</a>
</td>
<td>
<?php echo $fw->customer($_SESSION['USERID'])->getAccountManagerbyId($v['accountManager_id']); ?></td>
<td>
<?php echo $v['dateCreated']; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>

You have an undefined or null value at 3 column of 35 row. You should pass some value at that place .

How to make jQuery tabs that update active or selected tab?

I want jQuery tabs but I want it to change the one that's selected via the .selected CSS property, how can I do that with jQuery tabs? I tried addClass and removeClass to no avail.
Thanks very much.
Code below:
<div class='content'>
<div class='tabs'>
<div id='resultsTableNav'>
<a href='#tab-1' class='resultsButton selected'>MY BETS</a>
<a href='#tab-2' class='resultsButton'>ALL BETS</a>
<a href='#tab-3' class='resultsButton'>ON CHAIN</a>
<a href='#tab-4' class='resultsButton'>CHAT</a>
<a href='#tab-5' class='resultsButton noMargin'>FAIR</a>
</div><!-- end resultsTableNav -->
<div id='tab-1'>
<table width='100%' border='0' cellspacing='0' cellpadding='0' class='resultsTable'>
<thead>
<tr>
<td>NAME</td>
<td>BET ADDRESS</td>
<td>WIN ODDS</td>
<td>PRIZE MULTIPLIER</td>
<td>HOUSE PERCENT</td>
<td>MIN BET</td>
<td>MAX BETS</td>
</tr>
</thead>
<tbody>
<?php
for($i=0; $i<=12; $i++)
{
if($i%2==0)
$class='greyRow';
else
$class='';
?>
<tr class='<?php echo $class; ?>'>
<td>Developer</td>
<td><div class='addressScroll'>1ChqhkyQENiuG4J6UDCvNjfiLJp5zkqhX7</div></td>
<td>97.6563%</td>
<td>1.004x</td>
<td>1.900%</td>
<td>0.0100</td>
<td>500.0000</td>
</tr>
<?php
}?>
</tbody>
</table>
</div>
</div>
</div><!-- end content -->

Categories