数据表无法正常工作

时间:2014-02-13 11:30:29

标签: javascript php json codeigniter datatable

大家好我正在尝试使用数据表来反映我的数据库,但我没有得到数据表中的结果。需要帮助!!!

我的控制器: -

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();
}

}

我的观点: -

<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>

我的输出: -

{"sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["1","Ahmad","Niza","451","AA1","A1"],["2","Ahmadi","Reza","452","AA2","A2"]],"sColumns":"*"}

此代码有什么问题?

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

尝试添加此行:

"sDom": "frti"

所以你的代码看起来像是:

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

根据数据表documentation

  

sDom:

     

这个初始化变量允许您准确指定DOM中您希望DataTables注入它添加到页面的各种控件的位置(例如,您可能希望页面顶部的分页控件)。还可以添加DIV元素(带或不带自定义类)以辅助样式。使用以下语法:

     

允许以下选项:

    '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>'

最重要的一个是t,因为那是表......

我希望这会有所帮助。