DataTable 在 CodeIgniter 中没有按我预期的那样工作答案

【问题标题】：DataTable don't work as i expected in CodeIgniterDataTable 在 CodeIgniter 中没有按我预期的那样工作
【发布时间】：2015-01-17 20:04:31
【问题描述】：

我从 CodeIgniter 开始，但我没有让 dataTable 工作。我有以下页面和平：

<table class="table table-striped table-bordered table-hover dataTables_default" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Título</th>
                                            <th>Conteúdo</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($rows as $row){ ?>
                                           <tr class="odd gradeX">
                                            <td></td>
                                            <td><?= $row->titulo ?></td>
                                            <td><?= $row->conteudo ?></td>
                                         </tr>
                                        <?php } ?>

                                    </tbody>
                                </table>

重要提示：我正在使用管理模板：http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/tables.html

我的表格页面与上面的链接完全相同，但我想插入更多功能，例如：分页和过滤器。

我尝试在 sb-admin-2.js 中插入以下内容：

$(function() {

    $('#side-menu').metisMenu();

    //this was add
    $('#dataTables-example').dataTable();

});

但它没有任何效果。我尝试在我的 javascript 中放置一条 alert() 消息，但从未调用过此警报，请参阅：

$(function() {

        $('#side-menu').metisMenu();

       alert('im here');
    });

我的 sb-admin-2.js 文件在页面末尾导入，我在浏览器的源代码中看到（谷歌浏览器中的 CTRL+U）。那么有什么问题呢？为什么不调用 alert() 并且 dataTable 更改没有任何效果。

编辑 1

我不知道是否可以帮助解决我的问题，但是在浏览器控制台中我收到了错误：

Uncaught Error: Graph container element not found    morris.min.js:6

我认为这是错误只是因为我没有在此页面中显示任何图表并且 javascript 函数正在尝试调用图表。

【问题讨论】：

您是否在错误控制台中收到任何错误消息？
我把控制台错误放在我的帖子里。

标签： javascript php codeigniter datatable

【解决方案1】：

在文件morris-data.js中删除以下代码：

$(function() {

});

然后，确保morris-data.js 仅包含以下代码：

    Morris.Area({
    element: 'morris-area-chart',
    data: [{
        period: '2010 Q1',
        iphone: 2666,
        ipad: null,
        itouch: 2647
    }, {
        period: '2010 Q2',
        iphone: 2778,
        ipad: 2294,
        itouch: 2441
    }, {
        period: '2010 Q3',
        iphone: 4912,
        ipad: 1969,
        itouch: 2501
    }, {
        period: '2010 Q4',
        iphone: 3767,
        ipad: 3597,
        itouch: 5689
    }, {
        period: '2011 Q1',
        iphone: 6810,
        ipad: 1914,
        itouch: 2293
    }, {
        period: '2011 Q2',
        iphone: 5670,
        ipad: 4293,
        itouch: 1881
    }, {
        period: '2011 Q3',
        iphone: 4820,
        ipad: 3795,
        itouch: 1588
    }, {
        period: '2011 Q4',
        iphone: 15073,
        ipad: 5967,
        itouch: 5175
    }, {
        period: '2012 Q1',
        iphone: 10687,
        ipad: 4460,
        itouch: 2028
    }, {
        period: '2012 Q2',
        iphone: 8432,
        ipad: 5713,
        itouch: 1791
    }],
    xkey: 'period',
    ykeys: ['iphone', 'ipad', 'itouch'],
    labels: ['iPhone', 'iPad', 'iPod Touch'],
    pointSize: 2,
    hideHover: 'auto',
    resize: true
});

有关未捕获的错误：未找到图形容器元素的信息，见https://github.com/morrisjs/morris.js/issues/137

希望这有助于使您的数据表正常工作。

【讨论】：