Uncaught TypeError: undefined is not a function - datatables

Question

我正在尝试实现数据表，但出现错误：

未捕获类型错误：$(...).dataTable 不是函数

我正在尝试的代码是：

<script type="text/javascript" src="../assets/styles/components/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../assets/styles/components/data-tables/DT_bootstrap.js"></script>
<script>
$(document).ready(function() {
    $('#sample_1').dataTable({
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [0]
        }]
    });
    jQuery('#sample_1 .group-checkable').change(function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).attr("checked", true);
            } else {
                $(this).attr("checked", false);
            }
        });
        jQuery.uniform.update(set);
    });
    jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control");
    jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control");
});
</script>

这是我的 html 代码：

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped border-top" id="sample_1">
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Contract</th>
                    <th>Deposit</th>
                    <th>Price</th>
                    <th>Buy # of Contracts</th>
                    <th>Sell # of Contracts</th>
                    <th>P&amp;L </th>
                    <th>Expiry Time</th>
                    <th>Settlement Payout</th>
                    <th>Fee Payment</th>
                    <th>Sell to Close</th>
                    <th>Buy to Close</th>
                  </tr>
                </thead>
                <tbody>
<tr class="odd gradeX">
    <td>1</td>
    <td>04-01-2015</td>
    <td>09:33 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>118</td>
    <td></td>
    <td>2</td>
    <td>-118</td>
    <td>3PM</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>2</td>
    <td>04-01-2015</td>
    <td>09:33 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>118</td>
    <td></td>
    <td>2</td>
    <td>-1.8</td>
    <td>3PM</td>
    <td></td>
    <td>-1.8</td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>3</td>
    <td>04-01-2015</td>
    <td>09:43 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>80</td>
    <td></td>
    <td>2</td>
    <td>80</td>
    <td>3PM</td>
    <td></td>
    <td></td>
    <td></td>
    <td>80</td>
</tr>
<tr class="odd gradeX">
    <td>4</td>
    <td>04-01-2015</td>
    <td>09:43 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>80</td>
    <td></td>
    <td>2</td>
    <td>-0.9</td>
    <td>3PM</td>
    <td></td>
    <td>-0.9</td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>5</td>
    <td>04-01-2015</td>
    <td>09:45 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>80</td>
    <td></td>
    <td>2</td>
    <td>80</td>
    <td>3PM</td>
    <td></td>
    <td></td>
    <td></td>
    <td>80</td>
</tr>
<tr class="odd gradeX">
    <td>6</td>
    <td>04-01-2015</td>
    <td>09:45 AM</td>
    <td>EUR/JPY </td>
    <td></td>
    <td>80</td>
    <td></td>
    <td>2</td>
    <td>-0.9</td>
    <td>3PM</td>
    <td></td>
    <td>-0.9</td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>7</td>
    <td>04-01-2015</td>
    <td>10:28 PM</td>
    <td>AUD/USD </td>
    <td></td>
    <td>111.5</td>
    <td>2</td>
    <td>2</td>
    <td>-88.5</td>
    <td>11AM</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>8</td>
    <td>04-01-2015</td>
    <td>10:28 PM</td>
    <td>AUD/USD </td>
    <td></td>
    <td>111.5</td>
    <td>2</td>
    <td>2</td>
    <td>-1.8</td>
    <td>11AM</td>
    <td></td>
    <td>-1.8</td>
    <td></td>
    <td></td>
</tr>
<tr class="odd gradeX">
    <td>9</td>
    <td>04-21-2015</td>
    <td>01:00 PM</td>
    <td></td>
    <td>5000</td>
    <td>0</td>
    <td>2</td>
    <td>2</td>
    <td>5000</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
      </tbody>
  </table>

Answer 1

尝试改变

$('#sample_1').dataTable

来自

jQuery('#sample_1').dataTable

Answer 2

在尝试了很多解决方案后，我终于解决了我的问题。

问题是我使用了错误的文件层级结构。

因此，首先这不是插件集成的问题，而是一个接一个文件的正确排序。

这是我的代码的最终输出：

<!-- javascripts -->
<script src="../assets/styles/js/jquery.js"></script>
<script src="../assets/styles/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../assets/styles/js/jquery-ui-1.9.2.custom.min.js"></script>

<!-- bootstrap -->
<script src="../assets/styles/js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="../assets/styles/js/jquery.scrollTo.min.js"></script>
<script src="../assets/styles/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="../assets/styles/jquery-knob/js/jquery.knob.js"></script>
<script src="../assets/styles/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="../assets/styles/components/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="../assets/styles/js/owl.carousel.js" ></script>

<!-- jQuery full calendar -->
<script src="../assets/styles/components/fullcalendar/fullcalendar/fullcalendar.min.js"></script>

<!--script for this page only-->
<script src="../assets/styles/js/calendar-custom.js"></script>

<!-- custom select -->
<script src="../assets/styles/js/jquery.customSelect.min.js" ></script>

<!--custome script for all page-->
<script src="../assets/styles/js/scripts.js"></script>

<!-- custom script for this page-->
<script src="../assets/styles/js/sparkline-chart.js"></script>
<script src="../assets/styles/js/easy-pie-chart.js"></script>
<script type="text/javascript" src="../assets/styles/components/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../assets/styles/components/data-tables/DT_bootstrap.js"></script>
<script>
$(document).ready(function() {
        $('#sample_1').dataTable({
            "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },
            "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0]
            }]
        });
        jQuery('#sample_1 .group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                } else {
                    $(this).attr("checked", false);
                }
            });
            jQuery.uniform.update(set);
        });
        jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control");
        jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control");
    });
</script>

Uncaught TypeError: undefined is not a function - datatables

Uncaught TypeError: undefined is not a function - datatables

javascript

jquery

jquery-datatables

datatables-1.10