The datatable cdn is not working with a table that I call from another page using ajax. The new table gets generated, but it does not show the other features of the datatable in the table, and only show table on the page.
I have made a page which has a button, which calls a function that refreshes the table by ajax. I put the cdn datatable links and codes on the other page which is working fine when opened directly, but when called from ajax it doesn't show the datatable cdn function. Instead, the whole table is shown.
$(function() {
$('#populate').click(function() {
$.ajax
({
type: "POST",
url: "getPurchaseInvoice.php",
data: $('#frm3').serialize(),
success: function(data)
{
$('.example').html(data);
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%" border="1" class="example" data-page-length="25">
<thead>
<tr>
<th>S.No</th>
<th>Invoice No.</th>
<th>Date</th>
<th>Name</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
while($row = mysql_fetch_assoc($rs)){
?>
<tr>
<td><?php echo $inc;?></td>
<td><?php echo $row['hrm_inv_no'];?></td>
<td><?php echo $row['fdate'];?></td>
<td><?php if($row['hrm_vendor_name'] != ''){ echo $row['hrm_vendor_name']; } else { echo "Other"; }?></td>
<?php /*?><td><?php echo $row['hrm_vendor_name'];?></td><?php */?>
<td><?php echo $row['hrm_net_value'];?></td>
<td align="center"><a class="iframef" href="purchaseinvoice.php?actiontype=print&id=<?php echo $row['hrm_inv_no'];?>"><img src="images/print.png" alt="Print"></a> | <img id="itemdel" title="Delete" onclick="deletePos('<?php echo $row['hrm_inv_no'];?>')" src="images/b_drop.png" style="cursor:pointer" alt="Delete"></td>
</tr>
<?php $inc++;
}
/*header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=Purchase-Invoice-".date('Y-m-d').".xls");
header("Pragma: no-cache");
header("Expires: 0");
*/
?>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="tableexport/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.example').DataTable( {
dom: 'lBfrtip',
buttons: [
{
extend: 'excelHtml5',
text: 'Save Excel',
title: 'Purchase Invoice',
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr( 's', '42' );
}
},
{
extend: 'pdfHtml5',
text: 'Save Pdf',
title: 'Purchase Invoice'
}
]
} );
} );
</script>
<div id="purchaseInvoice">
<table style="width:100%" border="1" class="example" data-page-length="25">
<thead>
<tr>
<th>S.No</th>
<th>Invoice No.</th>
<th>Date</th>
<th>Name</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
If my understanding is good, you would like to load a php page containing a Datatable providing some data.
If so, the .load() method should be appropriate.
$('.example').load( "getPurchaseInvoice.php", $('#frm3').serialize());
Related
I have used Datatables to make my generic table look good. It has started working accurately like showing how many pages to show and a search box. But It does not do any functionality like search or pagination.
Here is my code
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Data fetching is working fine. The table is looking fine also. The only thing that i want is for it to work properly like a datatable should.
I changed some of your script tags and link tags and moved them around a little and changed your code to:
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Try changing your code to this. I don't have the data to populate the table but this seemed to make pagination and the search functionality and everything a dataTable is supposed to do appear to work for me.
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
index.php
First I create a connection with the database, I design table through <td> and <tr>, I create a variable $action to get data through AJAX. I use mysqli_fetch_array to fetch data from the database.
<?php
//including the database connection file
include_once("config.php");
//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
<script src="DataTables/datatables.js"></script>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/datatable.js"></script>
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
</head>
<body>
Add New Data<br/><br/>
<table id="datatable" class="display" width='100%' border=0>
<thead>
<tr bgcolor='#CCCCCC'>
<td>Name</td>
<td>Age</td>
<td>Email</td>
<td>Update</td>
</tr>
</thead>
<?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
//$action=$_POST["action"];
//if($action=='showroom')
{
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$res['name']."</td>";
echo "<td>".$res['age']."</td>";
echo "<td>".$res['email']."</td>";
echo "<td>Edit | Delete</td>";
}
}
?>
</table>
</body>
</html>
Add.html
<html>
<head>
<title>Add Data</title>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/insert.js"></script>
<script src="style/view.js"></script>
</head>
<body>
Home
<br/><br/>
<table bgcolor="orange" align="center" width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" id="submit" value="Add"></td>
</tr>
</table>
<button type="button" id="submitBtn">Show All</button>
<div id="content"></div>
</body>
</html>
view.js
I fetch data from the database. I use the show_all() function after that I call $.ajax, data, url, type, success function. The first time I try to fetch data from the database through AJAX.
$(document).ready(function(e) {
$('#submitBtn').click(function() {
debugger;
$.ajax({
//data :{action: "showroom"},
url :"index.php", //php page URL where we post this data to view from database
type :'POST',
success: function(data){
$("#content").html(data);
}
});
});
});
**index.php**
<?php
//including the database connection file
include_once("config.php");
//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
<script src="DataTables/datatables.js"></script>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/datatable.js"></script>
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
</head>
<body>
Add New Data<br/><br/>
<table id="datatable" class="display" width='100%' border=0>
<thead>
<tr bgcolor='#CCCCCC'>
<td>Name</td>
<td>Age</td>
<td>Email</td>
<td>Update</td>
</tr>
</thead>
<?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
//$action=$_POST["action"];
//if($action=='showroom')
{
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$res['name']."</td>";
echo "<td>".$res['age']."</td>";
echo "<td>".$res['email']."</td>";
echo "<td>Edit | Delete</td>";
}
}
?>
</table>
</body>
</html>
**add.html**
<html>
<head>
<title>Add Data</title>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/insert.js"></script>
<script src="style/view.js"></script>
</head>
<body>
Home
<br/><br/>
<table bgcolor="orange" align="center" width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" id="submit" value="Add"></td>
</tr>
</table>
<button type="button" id="submitBtn">Show All</button>
<div id="content"></div>
</body>
</html>
**view.js**
$(document).ready(function(e) {
$('#submitBtn').click(function()
{
debugger;
$.ajax({
//data :{action: "showroom"},
url :"index.php", //php page URL where we post this data to view from database
type :'POST',
success: function(data){
$("#content").html(data);
}
});
});
});
**datatable.js**
$(document).ready(function() {
$('#datatable').DataTable( {
} );
} );
$.ajax({
data :{"action": "showroom"} ,
url :"index.php",
type :'POST',
success: function(data){
$("#content").html(data);
}
});
}
Maybe this can help you. I use this to get data from the database.
$.ajax({
type: "GET",
url: "process.php",
success: function(data) {
if (data != "null") {
$('#div_id').html(data)
} else {
$('#div_id').html('<p>No Data found</p>')
}
}
})
you can check this for complete tutorial.how to fetch data from database in php using ajax with example
I have added this script for fancybox popup. But it is not working.
It is working on other page but don't know what is the problem in this page, there is much more JavaScript for other functionality, may be this is the reason, but when in console, there's no error!
<table id="tb1" cellspacing="0" cellpadding="7" style="width:99%;border:solid 1px#c0bebe;min-width:550px;height:auto;font-family:arial;font-size:11px;margin-left: 6px;border-bottom: none;">
<tr class="heads tr_check" height="44px">
<th style="padding-left:15px;width:5%">Date</th>
<th style="padding-left:15px;width:5%">From</th>
<th style="padding-left:15px;width:5%">Mode</th>
<th style="padding-left:15px;width:40%">Message</th>
<th style="padding-left:15px;width:10%;border-right: medium none;">Document</th>
</tr>
<?php
$msgMngResult = getMessagesForEdit($_GET['projectid']);
if(mysql_num_rows($msgMngResult)>0) {
while($msgMngtaskDtlsRow = mysql_fetch_array($msgMngResult)) {
if($msgMngtaskDtlsRow['message_from']=='Client') {
$bgcolor = "background-color:#F8E0EC";
} else {
$bgcolor = "background-color:#E7FFD6";
}
$id = $msgMngtaskDtlsRow['id'];
$msgres = getMsgDoc($id);
?>
<tr height="44px" class="tr_check">
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['msg_date'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_from'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_mode'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo substr($msgMngtaskDtlsRow['message'],0,100);?>Read More..</td>
<div id="divForm<?php echo $id;?>" class="fancybox" style="display:none;">
<p><?php echo $msgMngtaskDtlsRow['message'];?></p>
</div>
<td style="border-right: medium none;padding-left:15px;<?php echo $bgcolor;?>">
<?php while($res = mysql_fetch_array($msgres)) {
echo "<br/><a href='".PROJECT_FILE_PATH.$msg_doc."/".$res['message_docs']."' target='_blank' style='color:blue;text-decoration: underline;'>".$res['message_docs']."</a><br/>";
}
?>
</td>
</tr>
<tr class="hidetr tr_check acctr_<?php echo $msgMngtaskDtlsRow['id']; ?>" ><td colspan="8" style="border-right:0px;"></td></tr>
<?php
}
} else { ?>
<tr height="44px" class="tr_check">
<td align="center" colspan="12">
<div id="err"><div id="errormsg" class="no-record"><strong> No Records Found </strong></div></div>
</td>
</tr>
<?php
} ?>
</table>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/tabber.js"></script>
<script type="text/javascript" src="js/paddRow.js"></script>
<script type="text/javascript" src="js/addUnitRow.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script>
$('.fmsg').live('click', function () {
var id = $(this).attr('id');
alert(id);
$("#"+id).fancybox({
'width':800,
'height':450,
'autoSize' : false,
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
Sometimes it shows - ement.prop is not defined.
It appears often.
I hope you can help me. My problem is I want to load a huge amount of data total of 50000 rows in my datatable plugin but I dont know how to incorporate it with CodeIgniter framework.
Here's my sample data.
In my controller i create a function like this, for testing purposes I didn't put it in my model.
public function displayListItem(){
$sqlSelectAll = "select * from items";
$resultSelectAll = $this->db->query($sqlSelectAll);
echo json_encode($resultSelectAll->row_array());
}
Next is my view to call the SQL:
<!-- jquery part -->
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<?php echo site_url("item_controller/displayListItem"); ?>"
} );
} );
Below is my table that will populate my data from mysql database
<table id="example">
<thead>
<tr>
<th></th>
<th>CODE</th>
<th>NAME</th>
<th>DESCRIPTION</th>
<th>BRAND</th>
<th>UNIT</th>
<th>CATEGORY NAME</th>
<th>ENTRY DATE</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<!-- THIS IS THE PART WHERE I NEED TO PUT THE DATA, BUT I DON'T KNOW HOW -->
</tbody>
</table>
That's all guys I hope you can help me. Thanks
Firstly keep the media folder in the codeigniter project folder. media folder is one which is required by datatables which contains the js,images and css files. set your base_url in codeigniter config.php. setup your database in codeigniter database.php. setup your url helper $autoload['helper'] = array('url'); in autoload.php.
This is my controller.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function index()
{
$this->load->model('cmodel');
$data['d']=$this->cmodel->get_result();
$this->load->view('welcome_message.php',$data);//$data is an array which is sent to view
}
}
The $data['d'] contains the array returned from the model which is sent to view
This is my model.
<?php
class Cmodel extends CI_Model
{
function __construct()
{
parent::__construct();
}
function get_result()
{
$query=$this->db->query("your custom query;");
return $query->result_array();//return the result_array to the controller.
}
}
?>
This is the view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CodeIgniter</title>
<style>
*{
font-family: arial;
}
</style>
<style type="text/css">
#import "<?php echo base_url();?>media/css/demo_table_jui.css";
#import "<?php echo base_url();?>media/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<script src="<?php echo base_url();?>media/js/jquery.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#datatables.dataTables_filter input').focus()
$('#datatables').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[2, "desc"]],
"bJQueryUI":true
});
})
</script>
</head>
<body>
<div>
<table id="datatables" class="display">
<thead>
<tr>
<th>id</th> <!-- These are the table heading-->
<th>name</th>
<th>order</th>
</tr>
</thead>
<?php foreach($d as $row):?><!--This is how you access the fields -->
<tr>
<td>
<?php echo $row['id'];?>
</td>
<td>
<?php echo $row['name'];?> <!-- here id,name,order are my column names-->
</td>
<td>
<?php echo $row['order'];?>
</td>
</tr>
<?php endforeach?>
</table>
</div>
</body>
</html>
This will work perfectly. please vote