Question

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

未捕获TypeError：$（...）。dataTable不是函数

我正在尝试的准则是：

!pte_present && !pte_none

这是我的HTML代码：

<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>

Answer 1

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

问题在于我使用了错误的文件层次结构。

所以，首先它不是问题，也不是插件集成，而是一个接一个地正确排序文件。

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

<!-- 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>

Answer 2

尝试改变

$('#sample_1').dataTable

通过

jQuery('#sample_1').dataTable

未捕获的TypeError：undefined不是函数 - 数据表

2 个答案: