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

有關Uncaught Error：找不到圖容器元素的信息 ，請參見https://github.com/morrisjs/morris.js/issues/137

希望這有助於使您的數據表正常工作。