如何使用codeigniter和datatables Jquery插件创建服务器端数据表

时间:2012-05-27 15:06:24

标签: jquery codeigniter datatables

我正在使用Codeigniter和dataTables Jquery插件。

我有大约3000行记录显示在表格中(我正在使用postgresql)。但我不希望第一次加载整个记录(它会减慢页面加载速度)。代替。我喜欢将它分成几页并在用户点击下一个按钮时根据用户操作加载它。我对我制作的一些代码感到困惑,但它仍然在表格底部显示了“显示1到NaN的NaN条目(从NaN总条目中过滤)”的完整记录。 这是我的代码。

控制器:

<?php

class Testdata extends CI_Controller
{
    function __consrtuct()
    {
        parent::__consrtuct();
    }

    function index()
    {
        $this->load->view('vtestdata');
    }

    function getData()
    {

        $this->load->model('mtestdata');
        $result = $this->mtestdata->getDatax();
        echo json_encode($result);

    }
}

模特:

<?php

class Mtestdata extends CI_Model
{
    function __construct()
    {
        parent::__construct();
    }


    function getDatax()
    {

        //output
        $output = array(
                "aData" => array()
            );
        $this->db->select('nik, user_name');
        $query=$this->db->get('t_mtr_user');
        $output["aData"] = $query->result();
        return $output;
    }
}

观点:

<head>
    <script type="text/javascript" src="<?php echo base_url();?>/assets/media/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>/assets/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>/assets/jqueryUI/js/jquery-ui-1.8.20.custom.min.js"></script>

    <script type="text/javascript">
        $( document ).ready( function() {

            $('#testTable').dataTable({


                "bJQueryUI": true, //UI
                "sAjaxSource": "<?=base_url();?>index.php/testdata/getData", //datasource
                "sAjaxDataProp": "aData", //menentukan array/json dibaca dari mana
                "bServerSide": true, //serverside , ini yg bermasalah, kalo di delete beres gak ada error, tapi gak SSP
                "bProcessing": true,
                "aoColumns":[ //tentukan kolom pd tabel dan value nya
                    {"mDataProp": "nik", "sTitle": "NIK"},
                    {"mDataProp": "user_name", "sTitle": "Username"}
                ] 


           });
        });



    </script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/jqueryUI/css/custom-theme/jquery-ui-1.8.20.custom.css">
</head>
<body>
<div>
<h1>test</h1>
<table id="testTable">
    <thead>
        <!--
        <tr>
        <th>nik</th>
        <th>User name</th>
        </tr>
        -->
    </thead>
    <tbody>
    <!--
        <td></td>
        <td></td>
        -->
    </tbody>
</table>
</div>
</body>

任何建议伙伴们?我非常感谢你的帮助。 : - )

1 个答案:

答案 0 :(得分:4)

而是指这个code。我使用它制作了我的数据表,它工作得很好。如果您遇到问题,请告诉我。