I fetched data from Mysql for a table. Each row has 5 cell.
If the 4th cell values of two rows are the same then I want to merge those rows.
I tried using javascript arrays but I couldn't merge the rows. Can anyone share their ideas or send me any sample code. Thanks in advance.
I was like posting a picture, but because im new and doesnt have reput, it was not uploaded...
well, here the link of the photo
If that's what you asking for... I have a kinda long code.. i dont know if it is efficient but its working for me
int itemsize = 5; //number of rows that is expected to be in merged
for(int item=0; i<itemsize ; i++){//this jsp
%>
<tr>
<td><%=value%></td>
<td><%=value%></td>
<%
if(itemsize > 1 && item==0){ //if the itemsize more than 1, and it is the first row, it will put a rowspan that has the value of the itemsize or the number of row to be merged
%>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<%
}else if(itemsize > 1 && item>0){
//on the second loop this will be executed but bcoz we have rowspan, <td> should be eliminated on the succeeding row*
}else{ // but if there is only one row to be displayed, no rowspan is needed, so ordinary <td will be written..
%>
<td><%=value%></td>
<td><%=value%></td>
<td><%=value%></td>
<%
}
%>
</tr>
<%
}
EDITED:
This is my new code. i made a sample using php. try to run it. Sorry for the code, its my first PHP.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ font-family: tahoma, Arial; font-size: 9pt;}
table {border-collapse:collapse; font: tahoma, Arial 9pt;}
table th{font-family: tahoma, Arial, Geneva, sans-serif; font-size:9pt; width:75px; background-color:#999; color:#000; text-transform:uppercase;}
table th, td{ padding:4px 6px; text-transform:capitalize;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000">
<thead>
<th style="width:10px; text-align:right">Count</th>
<th>Detail 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 6</th>
<th>Detail 2</th>
</thead>
<tbody>
<?php
$arr_detail_1 = array("angelo", "philip", "raymond", "jonathan", "pedro");
$arr_detail_2 = array("Cavite", "Laguna", "Quezon", "Japan", "Surigao");
$arr_detail_3 = array("10-dec", "11-Sep", "12-Feb", "22-July", "15-Oct");
$arr_detail_4 = array("Pink", "blue", "Green", "White", "Purple");
$arr_detail_5 = array("Computer", "Door Lock", "Pencil", "Cup", "Jeans");
$a=array("screw");
$b=array("ball","paper","Big","Liquid","id");
$c=array("Sewing");
$d=array("Running","Biking","Swimming");
$e=array("Tree","planting","root","fruits","Rain","Grass");
$f=array("driver");
$g=array("Pen","bag","Brother","eraser","lace");
$h=array("machine");
$i=array("barefoot","with no bike","technique");
$j=array("planting","tree","crops","bearig-trees","Forest","Hopper");
$arr1 = array($a, $b, $c, $d, $e);
$arr2 = array($f, $g, $h, $i, $j);
$rowcount = 1;
for ($i=0; $i<count($arr1); $i++){
// echo "The number is " . $i . "<br />";
$temp_arr_1 = $arr1[$i];
$temp_arr_2 = $arr2[$i];
for($x=0; $x<count($temp_arr_1); $x++){
?>
<tr>
<td align="right"><?php echo $rowcount; ?>.</td>
<td><?php echo $temp_arr_1[$x]; ?></td>
<td><?php echo $temp_arr_2[$x]; ?></td>
<?php
$span_count = count($temp_arr_1);
if($span_count>1 && $x==0){
?>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_1[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_2[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_3[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_4[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_5[$i]; ?></td>
<?php
}else if($span_count>1 && $x>0){
//
}else{
?>
<td><?php echo $arr_detail_1[$i]; ?></td>
<td><?php echo $arr_detail_2[$i]; ?></td>
<td><?php echo $arr_detail_3[$i]; ?></td>
<td><?php echo $arr_detail_4[$i]; ?></td>
<td><?php echo $arr_detail_5[$i]; ?></td>
<?php
}
?>
</tr>
<?php
$rowcount++;
}
}
?>
</tbody>
</table>
</body>
</html>
i did use array to act as dbase... ;] and do the code in way like i do it with JSP so i hope you'll understand. im really new at php. even in java, im not sure if what im doing is correct! i code as long as it run, even if its slow.. but im trying to fix that! good luck to your project evangeline.
A really quick sample if you did want to do it in javascript for some reason:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table border="2" id="aTable">
<tr>
<td>First</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
</tr>
</table>
</body>
<script type="text/javascript">
function MergeCommonRows(table, columnIndexToMerge){
previous = null;
cellToExtend = null;
table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
jthis = $(this);
content = jthis.text()
if(previous == content){
jthis.remove();
if(cellToExtend.attr("rowspan") == undefined){
cellToExtend.attr("rowspan", 2);
}
else{
currentrowspan = parseInt(cellToExtend.attr("rowspan"));
cellToExtend.attr("rowspan", currentrowspan+1);
}
}
else{
previous = content;
cellToExtend = jthis;
}
});
};
MergeCommonRows($("#aTable"), 1);
</script>
</html>
Its not a good idea to use javascript. First of all, some users may have deactivated js, or even not available (eg mobile phone browser).
I suggest to get the data from mysql, loop through them in php (if you use php), copy the data to a new array while doing any necessary merging and then print the new "correct" array.
Is it php that you are using? The sample code you need, has to be server side (eg php).
You should give the last cell in the first row rowspan="2" and omit the last cell in the next row.
<table>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td rowspan="2">some value</td>
</tr>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
</tr>
</table>
Related
My html page is currently loading with an array of arrays, from previous redirect. Each element in the array should be rendered on a table.
So for example the array is [[h1,h2,h3,1,2,3,4,5,6], [h1,h2,h3,7,8,9,10,11,12]]
The first table should look like this
h1 h2 h3
1 2 3
4 5 6
Similarly the others.
Below is the html formatting of the table.
<table style="width:50%">
<tr>
<th><font color="black"><b>h1</b></font></th>
<th><font color="black"><b>h2</b></font></th>
<th><font color="black"><b>h3</b></font></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<br>
How can I make a javascript function such that on loading the page it renders all the data in the array in the html table format as mentioned above.
Thank you for your input and time.
this is a basic code you can start from:
<?php
$array = [['h1','h2','h3','1','2','3','4','5','6'], ['h1','h2','h3','7','8','9','10','11','12']];
echo '<table>';
foreach($array as $value) {
echo '<tr>';
echo '<td>'.$value[0].'</td>';
echo '<td>'.$value[1].'</td>';
echo '<td>'.$value[2].'</td>';
echo '</tr>';
echo '<tr>';
echo '<td>'.$value[3].'</td>';
echo '<td>'.$value[4].'</td>';
echo '<td>'.$value[5].'</td>';
echo '</tr>';
}
echo '</table>';
and this is its output
<table>
<tbody>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
You could assign an "id" to the html table to be able to create and attach DOM elements with Javascript
Here you can find some reference about Document object in JS:
https://developer.mozilla.org/en-US/docs/Web/API/Document/Document
how to create html elements:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
var createHeaderElem = function(value) {
var th = document.createElement('th');
th.appendChild(document.createTextNode(value));
return th;
}
var createRowElem = function(value) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(value));
return td;
}
var input = ['h1','h2','h3',1,2,3,4,5,6];
var table = document.getElementById('content-table');
var trHeader = document.createElement('tr');
trHeader.appendChild(createHeaderElem(input[0]));
trHeader.appendChild(createHeaderElem(input[1]));
trHeader.appendChild(createHeaderElem(input[2]));
table.appendChild(trHeader);
var trBody = document.createElement('tr');
trBody.appendChild(createRowElem(input[3]));
trBody.appendChild(createRowElem(input[4]));
trBody.appendChild(createRowElem(input[5]));
table.appendChild(trBody);
var trBody = document.createElement('tr');
trBody.appendChild(createRowElem(input[6]));
trBody.appendChild(createRowElem(input[7]));
trBody.appendChild(createRowElem(input[8]));
table.appendChild(trBody);
<table id="content-table" style="width:50%">
</table>
like i mention in the title i have a problem when i want to print a div> Containing another hidden div with javaScript the bootstrap styling gone
before pushing the print botton
after pushing the print botton
<script type="text/JavaScript">
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.getElementById('hidden_div').style.display='block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
<div id=table>
<table class="table table-hover">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<thead class="table-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Nom Article</th>
<th scope="col">CIN du responsable</th>
<th scope="col">Date</th>
<th scope="col">Quantite</th>
<th class="text-center" scope="col" colspan="2" width="1%">Options</th>
</tr>
</thead>
<tbody class="table-light">
<?php while($donnees = mysqli_fetch_array($reponse3)){
$donnees1=mysqli_fetch_array(mysqli_query($con,"select NOM_ARTICLE from article where ID_ARTICLE = $donnees[1]"));
$login_cin=mysqli_fetch_array(mysqli_query($con,"select CIN from utilisateurs where ID_LOGIN = $donnees[2]"));
?>
<tr>
<th scope="row"><?php echo $donnees[0];?></th>
<td><?php echo $donnees1[0]; ?></td>
<td><?php echo $login_cin[0]; ?></td>
<td><?php echo $donnees[3]; ?></td>
<td><?php echo $donnees[4]; ?></td>
<td><img src="res\images\edit-icon.svg" height="30x" title="modifier"></td>
<td><a onclick="supprimer(<?php echo $donnees[0]; ?>)" href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
</tr>
<?php
}?>
</tbody>
</table></div>
Please move the hidden_div out from the table.
<div id="table">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<table class="table table-hover">
<thead class="table-primary">
......
You can at least write the correct markup into the window you're opening, then provide the link to your CSS file (note that you'll need to put in the full URL):
<script>
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write('<html><head>');
myPrintWindow.document.write('<link rel="stylesheet" href="http://www.yourdomain.com/your/bootstrap/css/path/your-bootstrap-theme.css">');
myPrintWindow.document.write('</head><body>');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.write('</body></html>');
myPrintWindow.document.getElementById('hidden_div').style.display = 'block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
Admittedly this is not the best way to print a webpage. As mentioned by #BenRondeau using #media print (learn more about media query here) to define a style specifically for printing is the appropriate method. Your current method might work, yes, but learn to do things the right way is always more beneficial in the long run.
With Bootstrap data tables, you need to use table-row instead of 'block'
This has been an issue I have experienced in the past, and that fixed it.
myPrintWindow.document.getElementById('hidden_div').style.display='table-row';
I am confused when will display product comparison table. I have 2 tables t_product_item and t_product_specification. Here's a picture of the table structure:
I want to display a product comparison like this picture :
Script:
<table border="1">
<tr style="background-color: #C3C3C3">
<td>Product</td>
<td>Spec Name</td>
<td>Spec Value</td>
</tr>
<?php
$sql = mysqli_query($conn, "SELECT item, spec_name, spec_value FROM t_product_item JOIN t_product_specification USING (item_id)");
if (mysqli_num_rows($sql)>0){
while ($row=mysqli_fetch_array($sql)){
?>
<tr>
<td><?php echo $row['item']?>
<td><?php echo $row['spec_name']?>
<td><?php echo $row['spec_value']?>
</tr>
<?php
}}
?>
</table>
Instead it appears like this
Result:
How do I structure logically or query for the table to display like the example pic?
Change your SQL Query to:
SELECT spec_name,MAX(CASE WHEN ItemId=1 THEN spec_value END)`Samsung Galaxy S8+`
,MAX(CASE WHEN ItemId=2 THEN spec_value END)`Samsung Galaxy S8`
FROM t_product_item JOIN t_product_specification USING (item_id)
GROUP BY spec_name
ORDER BY MIN(spec_Id)
Hope this helps you.
You are looping through item_id for each of your <tr> rows. Instead you should be looping through spec_name for <tr>, and for each cell <td> loop through the product.
In pseudo code:
<table>
<thead>
<tr>
<th> </th> <!-- Empty cell for spacer -->
for (item in item_list) {
<th>item.name</th>
}
</tr>
</thead>
<tbody>
<tr>
for (spec in spec_list) {
<td>spec.name</td>
}
for (item in item_list) {
<td>item.spec[spec.name]</td> <!-- display spec detail of each item -->
}
</tr>
</tbody>
</table>
You might have to restructure your data before looping it through the table.
I want to calculate using jQuery keyup function.
Total Price = Quality x Unit Cost Price
Total Price = Quality x Unit Selling Price
jQuery:
$('input').keyup(function(){
//calculate
});
The problem is: when I click add price button, the new rows are added. How to call the new row id?
HTML:
<div class="price_table">
<div class="row">
<div class="span5 offset1"><h1>Price Breakdown<h1></div>
<div class="span4 offset1"><input type="button" id="add_price" class="btn btn-primary" value="Add Price" style="float:right;margin:30px 0px 5px 0px;"/></div>
</div>
<div class="row">
<div class="span10 offset1">
<table class="addcost_table table tablesorter">
<thead>
<tr class="header_row">
<th>Item Group</th>
<th>Name</th>
<th>Code</th>
<th>Quantity</th>
<th class="cost_price">Unit Cost Price</th>
<th class="selling_price">Unit Selling Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><?= form_input('items[0][sub_header]', 'Hotel') ?></td>
<td><?= form_input('items[0][name]', 'Twin Room') ?></td>
<td><?= form_input('items[0][price_type]', 'TWN') ?></td>
<td><?= form_input('items[0][quantity]', '5') ?> </td>
<td class="cost_price"><?= form_input('items[0][cost]', '100') ?> </td>
<td class="selling_price"><?= form_input('items[0][price]', '120') ?> </td>
</tr>
<tr>
<td><?= form_input('items[1][sub_header]', 'Hotel') ?></td>
<td><?= form_input('items[1][name]', 'Single Room') ?></td>
<td><?= form_input('items[1][price_type]', 'SGL') ?></td>
<td><?= form_input('items[1][quantity]', '1') ?> </td>
<td class="cost_price"><?= form_input('items[1][cost]', '80') ?> </td>
<td class="selling_price"><?= form_input('items[1][price]', '100') ?> </td>
</tr>
<tr>
<td><?= form_input('items[2][sub_header]', 'Meals') ?></td>
<td><?= form_input('items[2][name]', 'Buffet Breakfast') ?></td>
<td><?= form_input('items[2][price_type]', 'BRE') ?></td>
<td><?= form_input('items[2][quantity]', '2') ?> </td>
<td class="cost_price"><?= form_input('items[2][cost]', '10') ?> </td>
<td class="selling_price"><?= form_input('items[2][price]', '10') ?> </td>
</tr>
<tr>
<td colspan="4" style="text-align:right;margin-right:10px;"><b><span style="margin-right:20px;">Total Price X Qty</span></b></td>
<td class="cost_price"><?= form_input('items[3][cost]', '600') ?></td>
<td class="selling_price"><?= form_input('items[3][cost]', '500') ?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span11 offset1">
<?= form_submit(array('class' => 'btn btn-primary'), 'Submit') ?>
</div>
</div>
</div>
Thanks a lot my friends.
Working fiddle:
http://jsfiddle.net/vYbb2/
I've tried to let the table as you stated...
$('input').keyup( function(self) {
var buyCostAcc = 0;
var sellCostAcc = 0;
$($($($(this).parent().parent().parent()).children()).slice(1, -1)).each(function(self){
var quantity = $($(this).children()[3]).children().val();
var buyCost = $($(this).children()[4]).children().val();
var sellCost = $($(this).children()[5]).children().val();
buyCostAcc += quantity * buyCost;
sellCostAcc += quantity * sellCost;
});
$($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[2]).children()).val(buyCostAcc);
$($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[3]).children()).val(sellCostAcc);
});
You can make-up a little bit the js code by assigning this large parent().parent... to variables. You cannot get all the work done :)
UPDATE
Here: http://jsfiddle.net/AteQ2/
Note that I've removed the thead and tbody tags.
The trick here is to go up from the input DOM node that causes the key-up event until reach to the table node. Once you have found the table, you can play with children to get each row, and then do the same to get the cells (and the inputs inside the cells). The slice jQuery's method is pretty cool, you have a wide explanation here. JS console and debugger is very helpfull (almost mandatory) for this kind of DOM "tricks".
$(document).ready(function (){
$('input').keyup(function(){
//calculate
var costpriceSum = 0;
var selling_priceSum = 0;
$.find(".cost_price").each(function (){
costpriceSum += $(this).value;
});
$.find(".selling_price").each(function (){
selling_priceSum += $(this).value;
});
//Set costpriceSum
//Set selling_priceSum
});
});
You might want to give each input element an own class so you can easily loop over it.
// Enclosed in an anonymous func, is for namespacing, global variables, performance etc.
// See: http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li
(function(window, document, $, undefined) {
var totalSelling = calculateTotal('.selling_price_element');
var totalCost = calculateTotal('.cost_price_element');
function calculateTotal(element)
{
// Start at 0;
var total = 0;
// Loop over each element
$(element).each(function() {
var element = $(this),
price = element.val(); // Get the value
price = parseFloat(price); // Convert the input to a workable float.
// You might want to do some rounding, validation etc.. here.
total = total + price;
});
// return the total, round to two decimals
return total.toFixed(2);
}
})(this, document, jQuery);
To register listeners to future elements (i.e. that will be created after you set the handler), use on() with second param as selector:
$(document).on('keyup', 'input', function(){
//calculate
});
This says any time a keyup event happens, check if it was from input and if yes, then call my function.
I'm having a problem here where I could not run DataTables.net javascripts on Joomla 1.5. The script is as what it is on DataTables
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
var table = $('#example').DataTable();
} );
</script>
To say that it is Joomla stripping off my code, I managed to run Google Chart API javascript without any problems. Any experts here mind sharing why this is happening?
UPDATED:
Below is my code :
<?php
$doc = JFactory::getDocument();
$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');
$doc->addScriptDeclaration('
$(document).ready( function () {
$("#example").DataTable();
});
');
function listProcess($process,$date_sort)
{
$asas= new class_asas;
$sql = "
Select proses_pendaftaran.*, secretary.*,
kpps_agih.name as kpps_agih_name,
kpps_sokong.name as kpps_sokong_name,
ppps.name as ppps_name,
tps.name as tps_name,
pjs.name as pjs_name,
pt.name as pt_name
From proses_pendaftaran
Left join jos_users secretary On secretary.id=proses_pendaftaran.user_id
Left join jos_users kpps_agih On kpps_agih.id=proses_pendaftaran.kpps_agih_id
Left join jos_users kpps_sokong On kpps_sokong.id=proses_pendaftaran.kpps_sokong_id
Left join jos_users ppps On ppps.id=proses_pendaftaran.ppps_semak_id
Left join jos_users tps On tps.id=proses_pendaftaran.tps_perakui_id
Left join jos_users pjs On pjs.id=proses_pendaftaran.pjs_lulus_id
Left join jos_users pt On ppps.id=proses_pendaftaran.pt_rekod_id
Where current_process='$process'
Order By $date_sort DESC";
//echo $sql;
return $asas->readAll($sql);
}
$userm = $asas->getUser();
$userid = $user->get('id');
$userm=$asas->getOtherUser($userid);
$usergroup = $userm['user_group_id'];
//---------------------------------------------------------------------------------------------------------------
//PJS, TPS, KPPS
if($usergroup ==7 or $usergroup ==2 or $usergroup ==3 or $usergroup ==4 or $usergroup ==5)
{
$datas=listProcess('ppps_semak','kpps_agih_date');
?>
<h1 class="contentheading">Senarai Permohonan Yang Telah Diagihkan (Menunggu Tindakan PPPS/PPPS(P))</h1>
<table id ="example" width="100%" class="systemTable">
<thead>
<tr>
<th width="20%">NAMA BADAN SUKAN</th>
<th width="10%">NAMA PEMOHON</th>
<th width="10%">TARIKH PERMOHONAN</th>
<th width="10%">PEGAWAI KPPS</th>
<th width="15%">TARIKH DIAGIHKAN</th>
<th width="10%">PEGAWAI PPPS</th>
<th width="10%">STATUS</th>
</tr>
</thead>
<?php
foreach($datas as $data)
{
?>
<tr>
<td><?php echo strtoupper($data['NamaBadan']) ?></td>
<td><?php echo strtoupper($data['name']) ?><br/>[<?php echo $data['TelPejabat'] ?>]</td>
<td><?php echo date('d/m/Y',strtotime($data['tarikh_mohon'])) ?></td>
<td><?php echo strtoupper($data['kpps_agih_name']) ?></t>
<td><?php echo date('d/m/Y (h:ia)',strtotime($data['kpps_agih_date'])) ?></td>
<td><?php echo strtoupper($data['ppps_name']) ?></t>
<td><?php echo strtoupper($data['current_process']) ?></t>
</tr>
<?php
}
?>
</table>
<br/>
<?php
}
?>
Try using the following to import the scripts and add your custom code:
$doc = JFactory::getDocument();
$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');
$doc->addScriptDeclaration('
$(document).ready( function () {
$("#example").DataTable();
});
');
HTML:
<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>
I have tested this myself a couple of minutes ago and it works perfectly for me. Please copy and paste the script (a few changes made) and HTML I have provided.
First of all, since you are in a Joomla environment there will a conflict between mootools and jquery, so you cannot use
$(document).ready( function () { $("#example").DataTable(); });
but instead
jQuery.noConflict();
jQuery(document).ready( function () { jQuery("#example").DataTable(); });
in other words, you cannot use $ when mootools library is present.
You may also consider using Tabulizer for Joomla (http://www.tabulizer.com) that has all the datatables functionality without the hassle.