PS. I know there are abundant answers for this but they seemed so complex and I'm just a beginner in codeigniter and jquery with semantic UI so I'm having difficulty in web development.
I want to know how you can implement pagination in my code from the page which is loaded with an ajax function. I find it very difficult combining ajax with codeigniter and im not a very skilled programmer so please help me on this.
The java script which it loads all the data
function viewhardware(){
$.ajax({
type: "GET",
url: "gethw",
async: true,
}).done(function( data ) {
$('#hardware').html(data);
});
}
The Controller function
public function gethw(){
$this->load->model('asset_model');
$this->data['hwares'] = $this->asset_model->get_allhw();
$this->load->view('gethware',$this->data);
}
My Model function
public function get_allhw(){
$this->db->select('*');
$this->db->from('hardware h');
$query = $this->db->get();
if($query->num_rows() != 0)
{
return $query->result_array();
}
else
{
return false;
}
}
and the VIEW
<table class="ui compact table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Date Installed</th>
<th>Serial No.</th>
<th>PC ID</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<center><i class="huge desktop icon""></i><h3>Hardwares</h3>
<hr>
<?php
if(!empty($hwares)){
foreach($hwares as $hwares){
$hw_id = $hwares['hw_id'];
$hw_name = $hwares['hw_name'];
$hw_description = $hwares['hw_description'];
$hw_dateinstalled = $hwares['hw_dateinstalled'];
$hw_serialno = $hwares['hw_serialno'];
$hw_comp_id = $hwares['hw_comp_id'];
$hw_status = $hwares['hw_status'];
?>
<tr>
<th>
<?php echo $hw_id; ?>
</th>
<th>
<?php echo $hw_name; ?>
</th>
<th>
<?php echo $hw_description; ?>
</th>
<th>
<?php echo $hw_dateinstalled; ?>
</th>
<th>
<?php echo $hw_serialno; ?>
</th>
<th>
<?php echo $hw_comp_id;?>
</th>
<th>
<button class="ui basic button">
<center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?>
desktop icon"></i>
</button>
</th>
<th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a>
<a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>
</tr>
<?php
}
}
?>
</tbody>
</table>
You can use Ajax_pagination library.
Here you will find example of how to use it.
Your controller should looks like:
function __construct() {
parent::__construct();
$this->load->library('Ajax_pagination');
$this->perPage = 1;
}
public function gethw(){
$this->load->model('asset_model');
//total rows count
$totalRec = count($this->asset_model->getRows());
//pagination configuration
$config['first_link'] = 'First';
$config['div'] = 'div-to-refresh'; //parent div tag id
$config['base_url'] = base_url().'controller/ajaxPaginationData';
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->perPage;
$this->ajax_pagination->initialize($config);
//get the posts data
$this->data['hwares'] = $this->asset_model->getRows(array('limit'=>$this->perPage));
$this->load->view('view1',$this->data);
}
function ajaxPaginationData()
{
$page = $this->input->post('page');
if(!$page){
$offset = 0;
}else{
$offset = $page;
}
//total rows count
$totalRec = count($this->asset_model->getRows());
//pagination configuration
$config['first_link'] = 'First';
$config['div'] = 'div-to-refresh'; //parent div tag id
$config['base_url'] = base_url().'controller/ajaxPaginationData';
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->perPage;
$this->ajax_pagination->initialize($config);
//get the posts data
$this->data['hwares'] = $this->asset_model->getRows(array('start'=>$offset,'limit'=>$this->perPage));
//load the view
$this->load->view('view2', $this->data, false);
}
You have to split your view in 2 parts
VIEW1
<div id="hardware">
<div id="div-to-refresh">
<?php $this->load->view('view2',$this->data); ?>
</div>
<div id="pagination"><?php echo $this->ajax_pagination->create_links(); ?></div>
</div>
view2
<table class="ui compact table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Date Installed</th>
<th>Serial No.</th>
<th>PC ID</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<center><i class="huge desktop icon""></i><h3>Hardwares</h3>
<hr>
<?php
if(!empty($hwares)){
foreach($hwares as $hwares){
$hw_id = $hwares['hw_id'];
$hw_name = $hwares['hw_name'];
$hw_description = $hwares['hw_description'];
$hw_dateinstalled = $hwares['hw_dateinstalled'];
$hw_serialno = $hwares['hw_serialno'];
$hw_comp_id = $hwares['hw_comp_id'];
$hw_status = $hwares['hw_status'];
?>
<tr>
<th>
<?php echo $hw_id; ?>
</th>
<th>
<?php echo $hw_name; ?>
</th>
<th>
<?php echo $hw_description; ?>
</th>
<th>
<?php echo $hw_dateinstalled; ?>
</th>
<th>
<?php echo $hw_serialno; ?>
</th>
<th>
<?php echo $hw_comp_id;?>
</th>
<th>
<button class="ui basic button">
<center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?>
desktop icon"></i>
</button>
</th>
<th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a>
<a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>
</tr>
<?php
}
}
?>
</tbody>
</table>
I can not write all code for you but this can help you.
Make changes in your model to match with this.
Related
What I need is I want to automatically highlight the entire row that has 'KIV' value. The 'KIV' value is fetched from the database under 'masalah' field.
Here is my code:
<table id="myTable" class="w3-table-all w3-small w3-striped w3-hoverable w3-responsive">
<thead>
<tr>
<th></th>
<th></th>
<th class="text-center">Daerah</th>
<th class="text-center">Checkers</th>
<th>Nama Pesara</th>
<th class="text-center">No. Kad Pengenalan</th>
<th>No. Fail</th>
<th>Jawatan</th>
<th >Tarikh Bersara</th>
<th>Jenis Bersara</th>
<th>Umur Bersara</th>
<th >Tarikh Dokumen Diterima</th>
<th>Tarikh Kuiri</th>
<th >Tarikh Dokumen Lengkap</th>
<th >Tarikh Hantar KPM</th>
<th >Tarikh Sokongan KPM</th>
<th >Tarikh Hantar KWAP</th>
<th >Tarikh Lulus KWAP</th>
<th>Catatan</th>
</tr>
</thead>
<tbody>
<?php
include('connection.php');
if (isset($_GET['page_no']) && $_GET['page_no']!="") {
$page_no = $_GET['page_no'];
} else {
$page_no = 1;
}
$total_records_per_page = 20;
$offset = ($page_no-1) * $total_records_per_page;
$previous_page = $page_no - 1;
$next_page = $page_no + 1;
$adjacents = "2";
$result_count = mysqli_query($con,"SELECT COUNT(*) As total_records FROM rekod_pesara");
$total_records = mysqli_fetch_array($result_count);
$total_records = $total_records['total_records'];
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1; // total page minus 1
$result = mysqli_query($con,"SELECT * FROM rekod_pesara LIMIT $offset, $total_records_per_page");
while($row = mysqli_fetch_array($result)){
echo "<tr>
'<td><a href="datarekod.php?id='.$row['id'].'" class="btn btn-primary" ></a></td>' .
"<td class='a'>".$row['masalah']."</td>
<td>".$row['daerah']."</td>
<td>".$row['checkers']."</td>
<td>".$row['nama_pesara']."</td>
<td>".$row['no_kp']."</td>
<td>".$row['no_fail']."</td>
<td>".$row['jawatan']."</td>
<td>".$row['tarikh_bersara']."</td>
<td>".$row['jenis_bersara']."</td>
<td>".$row['umur_bersara']."</td>
<td>".$row['tar_terima_dok']."</td>
<td>".$row['tar_kuiri']."</td>
<td>".$row['tar_lengkap_dok']."</td>
<td>".$row['tar_hantar_KPM']."</td>
<td>".$row['tar_sokongan_KPM']."</td>
<td>".$row['tar_hantar_KWAP']."</td>
<td>".$row['tar_lulus_KWAP']."</td>
<td>".$row['catatan']."</td>
</tr>";
}
mysqli_close($con);
?>
<script type="text/javascript">
$('td a').click(function(e){
// prevent browser following link
e.preventDefault();
//open in new window
window.open(this.href,"","width=1000,height=650,top=100,left=100" );
});
</script>
</tbody>
</table>
Output as follows
But, what I need is the entire row with 'KIV' value only will be highlighted. I hope anyone can help me.. thank you in advance..
It's a simple case of using an if statement, or, as in my example below, shortening that to a ternary operator
"<td class='a'".($row['masalah'] == "KIV" ? "style='background-color:red'" : "").">"
N.B. If you want to do it on the whole row you'll need to set the style on the enclosing <tr> rather than a single <td>, but the basic approach is the same. (Your example code doesn't contain any <tr>s but I assume you must have omitted them for brevity.)
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 can't figure out how to correct my javascript to make it work correctly. My goal is to have a sum of values in the table footer, picking up only checked rows. Single rows selection works fine, but using the thead checkbox to add 'checked' property to every row displayed it doesn't trigger the action. Here is my code:
Javascript
//check all
$("#check-all").click(function () {
$(".data-check").prop('checked', $(this).prop('checked'));
});
$('#sumchecked').html('KG selezione: ');
$('#inventario', 'thead').on('change', 'input[type="checkbox"]', function(){
var totalSUM = 0;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
$('tr:has(:checked)').each(function () {
var getValue = parseFloat($(this).find("td:eq(3)").html().replace(",", "."));
totalSUM += getValue;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
});
});
HTML Markup
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
<th>KG</th>
<th>Operatore</th>
<th><span style="font-size:1.5em;" title="Cimosa" class="icon-scissors-cutting-by-broken-line"></span></th>
<th><span style="font-size:1.5em;" title="Specola" class="icon-silk"></span></th>
<th>Falli</th>
<th>Note</th>
<th>Data Produzione</th>
<th>Stato</th>
<th>Consegna</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked"></div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
Php controller in Codeigniter, ajax_list function used to generate table data
public function ajax_list()
{
$list = $this->packing->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $pezza) {
$no++;
$row = array();
$row[] = '<input type="checkbox" class="data-check" value="'.$pezza->n_pezza.'">';
$row[] = $pezza->n_pezza;
$row[] = $pezza->ID_ordine;
$row[] = number_format($pezza->kg_pezza,3,",",".");
$row[] = $pezza->nome_operatore;
if($pezza->selvedge == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
if($pezza->specola == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
$row[] = $pezza->falli;
$row[] = $pezza->note;
$row[] = $this->conversione1($pezza->data);
if ($pezza->stato == '1'){
$row[] = '<span style="font-size:1.5em;" title="Consegnata"class="icon-logistics-delivery-truck-in-movement"></span>';
$row[] = $this->conversione2($pezza->data_consegna);
}else{
$row[] = '<span style="font-size:1.5em;" title="Magazzino" class="icon-warehouse"></span>';
$row[] = '';
}
$row[] = '<div class="btn-group btn-group-justified" style="width:136px">
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Modifica" onclick="modifica_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-pencil"></i></a>
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Info Filati" onclick="info_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-info-sign"></i></a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Cancella" onclick="cancella_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-trash"></i></a>
</div>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->packing->count_all(),
"recordsFiltered" => $this->packing->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
This is my output if I check the first checkbox in thead
output sum checkboxes
Suggestions?
Thanks to everyone who will take some time to read and solve my problem.
Andy
It's easier to generate HTML code in #sumchecked on server side and put the attribute visibility: hidden to it. When you select a row, you do not need to run through all the selected rows every time. To minimize DOM traversing, it is better to request the current value of the total sum, and then add / subtract the price of the selected item to / from it. To get the sum of all selected items, simply insert in #checked-prices-total-sum the value from #totalkg.
For example, I took a 3 rows from your HTML table only with price columns and changed the code of your script:
$(document).ready(function() {
$("#check-all").click(function() {
var isChecked = $(this).prop('checked');
$(".data-check").prop('checked', isChecked);
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
if (isChecked) {
$totalSum.html($('#totalkg').html());
$sumchecked.css('visibility', 'visible');
} else {
$totalSum.html(0);
$sumchecked.css('visibility', 'hidden');
}
});
$('#inventario-data').on('change', 'input[type="checkbox"]', function(){
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
var totalSumValue = parseFloat($totalSum.html());
var price = parseFloat($(this).parent().next().next().html().replace(",", "."));
if ($(this).is(':checked')) {
totalSumValue += price;
} else {
totalSumValue -= price;
}
$totalSum.html(totalSumValue.toFixed(3));
totalSumValue > 0 ? $sumchecked.css('visibility', 'visible') : $sumchecked.css('visibility', 'hidden');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
</tr>
</thead>
<tbody id="inventario-data">
<tr>
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>10,200</td>
</tr>
<tr data-rowid="2">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>30,400</td>
</tr>
<tr data-rowid="3">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>50,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked" style="visibility: hidden;">KG selezione: <span id="checked-prices-total-sum">0</span></div></th>
<th>Tot. KG <span id="totalkg">91,200</span></th>
</tr>
</tfoot>
</table>
I have a table fetching its data from database
I want to make pagination for table but without refreshing the page
my table code:
<?php
<table id="table2" class="table table-hover table-mc-light-blue ">
<thead>
<tr>
<th>#</th>
<th>اسم المطرب</th>
<th>عدد الاغاني</th>
<th>تعديل</th>
</tr>
</thead>
<tbody class="searchable" >
<?php
$artistquery= mysqli_query($conn,"SELECT * FROM `artist` ORDER BY `artistID` DESC ");
$num=1;
$x=0;
while($listartist = mysqli_fetch_assoc($artistquery)){
$songquery= mysqli_query($conn,"SELECT * FROM `songs` WHERE `artist` = '$listartist[artistname]' ");
$songsnumber = mysqli_num_rows($songquery);
$x+=0.1;
echo'
<tr class="animated bounceIn " style=" animation-delay:'.$x.'s;">
<td data-title="#"></td>
<td data-title="اسم المطرب"></td>
<td data-title="عدد الاغاني"></td>
<td data-title=""></td>
</tr> ';}
?>
NOTE: I tried DataTables.js but i did know how to remove the filter and show labels.
is there any different way to do it ?
I dont fully comprehend your query so I'll stick to the pagination. Lets Say you want to show 10 items at a time and you are using next and prev as pagination buttons, you can render the first view using LIMIT 10 in your query or using array_slice($mysql_result,0,10). I have this downloaded json files containing zips (countries and code), that is what I used to test it. the next and prev totally perfect but it works.
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<script>
$(()=>{
document.querySelector('[data-next]').addEventListener('click',function(){
move(this.dataset.next);
console.log(this.dataset.next);
this.setAttribute('data-next',parseInt(this.dataset.next) + 10);//add to next
var prv = document.querySelector('[data-prev]');
prv.setAttribute('data-prev',parseInt(prv.dataset.prev) + 10);//add to prev
})
document.querySelector('[data-prev]').addEventListener('click',function(){
move(this.dataset.prev);
console.log(this.dataset.prev);
this.setAttribute('data-prev',parseInt(this.dataset.prev) - 10);// remove form next
var nxt = document.querySelector('[data-next]');
nxt.setAttribute('data-next',parseInt(nxt.dataset.next) - 10);//remove from prev
})
function move(int){
var template = document.querySelector('tbody tr').cloneNode(true);//get a sample from tbody
$.get('table.php?ajax=true&offset='+int).success(function(data){
$(document.querySelector('tbody')).empty();
$.each(data,function(i,v){
let tp = tmp.cloneNode(true);//clone the template
tp.querySelector("[data-replace='code']").innerHTML = v.code;//replace code
tp.querySelector("[data-replace='country']").innerHTML = v.country;//replace country
document.querySelector('tbody').appendChild(tp);//append to tbody
})
});
}
});
</script>
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.