未捕获的类型错误:未定义不是函数-数据表
Uncaught TypeError: undefined is not a function - datatables
我正在尝试实现datatable,但它给出错误:
Uncaught 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&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>
在尝试了许多解决方案后,我终于解决了我的问题。
问题是我使用了错误的文件放在另一个文件上的层次结构。
所以,首先这不是问题,也不是插件集成的问题,而是文件一个接一个的正确排序。
这是我代码的最终输出:
<!-- 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>
尝试更改
$('#sample_1').dataTable
jQuery('#sample_1').dataTable
相关文章:
- onChange 函数更改表中显示的数据
- 每次数据表中的页面更改时调用一个函数
- 从数据表中的角度$http.get返回一个值.js列的呈现函数
- 如何将 C# 数据表传递给 JavaScript 函数
- 如何在使用 jQuery 创建表后初始化数据表.js加载函数
- 从函数返回 YUI 数据表的参数
- 数据表对象在函数中不可用
- 通过函数刷新/重新绘制数据表
- 如何在display中显示数据:来自.json函数的表
- JavaScript SDK返回数据表单嵌套函数
- 如何使用函数对Google Charts数据表或数据视图进行排序
- 在数据表的onclick函数中传递两个以上的参数
- fnGetPosition不是一个函数-数据表
- 这个函数有什么问题,我正在重新绘制我的数据表
- JQuery数据表行不删除,尽管调用清除函数
- Jquery数据表-通过href触发导出函数
- 如何在Angularjs中使用复选框函数访问表数据
- 为什么这些数据表函数'未定义;
- 数据表:如何从另一个函数中获取变量值
- 未捕获的类型错误:未定义不是函数-数据表