-2

データテーブルを実装しようとしていますが、エラーが発生しています:

キャッチされていない TypeError: $(...).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>
4

2 に答える 2

0

いくつかの解決策を試した後、ようやく問題を解決しました。

問題は、ファイルを相互に配置する際に間違った階層を使用していたことです。

したがって、まず問題はプラグインの統合ではなく、ファイルの順番が適切であることです。

これは私のコードの最終出力です:

<!-- 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>
于 2015-05-14T12:28:23.530 に答える
-4

変えようとする

$('#sample_1').dataTable

に

jQuery('#sample_1').dataTable
于 2015-05-14T10:52:58.993 に答える