uncaught exception: DataTables Editor - remote hos

2019-05-28 13:57发布

问题:

I'm trying to implement CRUD operation using datatableseditor using Datatables.But I'm getting the error messages:

1)uncaught exception: DataTables Editor - remote hosting of code not allowed. Please see http://editor.datatables.net for details on how to purchase an Editor license

2)TypeError: a.Editor is undefined

3)$.fn.dataTable.Editor is not a constructor"

What could be the reason?

Here is my configuration:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
    href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css"
    href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script
    src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script
    src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script
    src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.14.4/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script
    src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
    <table id="example" class="table table-striped table-bordered"
        width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </tfoot>
    </table>
    <script>
        var editor; // use a global for the submit and return data rendering in the examples

        $(document).ready(
                function() {
                    editor = new $.fn.DataTable.Editor({
                        "ajax" : {
                            "url" : "getCaseTypeReport.do"
                        },
                        table : "#example",
                        fields : [ {
                            label : "First name:",
                            name : "caseTypeCode"
                        }, {
                            label : "Last name:",
                            name : "caseTypeCode"
                        }, {
                            label : "Position:",
                            name : "CaseTypeName"
                        }, {
                            label : "Office:",
                            name : "ShortForm"
                        }, {
                            label : "Extension:",
                            name : "CasePriority"
                        } ]
                    });
                    alert("editor::" + editor);
                    var table = $('#example').DataTable(
                            {
                                dom : "Bfrtip",
                                "ajax" : {
                                    "url" : "getCaseTypeReport.do"
                                },
                                columns : [
                                        {
                                            data : null,
                                            render : function(data, type, row) {
                                                // Combine the first and last names into a single table field
                                                return data.caseTypeCode + ' '
                                                        + data.caseTypeCode;
                                            }
                                        }, {
                                            data : "CaseTypeName"
                                        }, {
                                            data : "ShortForm"
                                        }, {
                                            data : "CasePriority"
                                        }

                                ],
                                select : true
                            });
                    alert("table::" + table);
                    // Display the buttons
                    new $.fn.dataTable.Buttons(table, [ {
                        extend : "create",
                        editor : editor
                    }, {
                        extend : "edit",
                        editor : editor
                    }, {
                        extend : "remove",
                        editor : editor
                    } ]);

                    table.buttons().container().appendTo(
                            $('.col-sm-4:eq(0)', table.table().container()));
                });
    </script>
</body>
</html>