javascript - DataTable 在 CodeIgniter 中无法按我的预期工作

Question

我从 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 文件在页面末尾导入，我在浏览器的源代码中看到(Google Chrome 中的 CTRL+U)。那么有什么问题吗？为什么alert()没有被调用并且dataTable的改变没有任何效果。

编辑 1

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

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

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

Answer 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

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