Hi all I am trying to use a datatable to reflect my database but I am not getting the result in the datatable. Help needed!!!
My Controller:-
public function __construct() {
parent::__construct();
$this->load->library('Datatables');
$this->load->library('table');
$this->load->database();
}
function index()
{
//set table id in table open tag
$tmpl = array ( 'table_open' => '<table id="big_table" border="1" cellpadding="2" cellspacing="1" class="mytable">' );
$this->table->set_template($tmpl);
$this->table->set_heading('Student ID','Name','Student Code','Class');
$this->load->view('subscriber_view');
}
//function to handle callbacks
function datatable()
{
$this->datatables->SELECT ('*', 'class')
->unset_column('student_id')
-> FROM ('students as s1')
->join ('student_class as s2','s1.class_id = s2.class_id');
echo $this->datatables->generate();
}
}
My View:-
<html>
<head>
<!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" lang="en" xml:lang="en">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Student Management</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen"/>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#big_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '<?php echo site_url('datatable'); ?>',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ":20,
"oLanguage": {
"sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>"
},
"fnInitComplete": function() {
oTable.fnAdjustColumnSizing();
},
'fnServerData': function(sSource, aoData, fnCallback)
{
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
} );
</script>
<h1>Student Management</h1>
<?php echo $this->table->generate(); ?>
</div>
</body>
</html>
My Output:-
{"sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["1","Ahmad","Niza","451","AA1","A1"],["2","Ahmadi","Reza","452","AA2","A2"]],"sColumns":"*"}
What is wrong with this code?
Thanks in advance for help.
Try adding this line:
"sDom": "frti"
so your code would look like:
var oTable = $('#big_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sDom": "frti" //added this line
"sAjaxSource": '<?php echo site_url('datatable'); ?>',
"bJQueryUI": true,
//rest of your code
According to the datatables documentation:
sDom:
This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
The following options are allowed:
'l' - Length changing 'f' - Filtering input 't' - The table! 'i' - Information 'p' - Pagination 'r' - pRocessing The following constants are allowed: 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix') 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix') The following syntax is expected: '<' and '>' - div elements '<"class" and '>' - div with a class '<"#id" and '>' - div with an ID Examples: '<"wrapper"flipt>' 'ip>'
The most important one would be the t as that is the table...
I hope this helps.