Question

我正在创建一个数据表来显示来自后端的数据库结果。

        <div class="box" id="table-box">
        <div class="box-body">
            <div class="row">
                <div class="shortcodes no-top-padding">
                    <div class="dataTables_wrapper table-bordered table-striped dt-bootstrap">
                        <table id="branchTable" class="table table-hover dataTable"
                               cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Telephone</th>
                                <th>Email</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

我正在向后端发送AJAX请求并返回数据。

<script type="text/javascript">

$(document).ready(function () {

    alert("here");
    $('#branchTable').DataTable({
        "serverSide": true,
        "processing": true,
        "ordering": false,
        "searchDelay": 1000,
        "ajax": "controller/listing-branch-controller.php",
        "columns": [
            {"data": "id", "visible": false},
            {"data": "name"},
            {"data": "address"},
            {"data": "telephone"},
            {"data": "email"}

        ],
        "language": {
            "searchPlaceholder": "by Name"
        },
        "pageLength": 10
    });
});

但我一直收到这个错误

TypeError: $(...).DataTable is not a function

我已根据需要导入了所有必要的脚本文件。

<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap Data Tables -->
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.bootstrap.min.js">   </script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.buttons.bootstrap.min.js"></script>

我未能找到出错的地方。有什么想法吗？

Answer 1

可能的原因

缺少jQuery DataTables库
jQuery库在 jQuery DataTables

加载了多个版本的jQuery库

解

在jQuery DataTables之前只包含一个版本的jQuery库1.7或更新的。

LINKS

有关详细信息，请参阅jQuery DataTables: Common JavaScript console errors - TypeError: $(…).DataTable is not a function。

Answer 2

// you have to add datatables librairie's in your page by adding those two lines

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

获取TypeError：$（...）。DataTable不是一个函数

2 个答案:

可能的原因

解

LINKS