使用Editor.datatables.net

时间:2015-07-01 08:08:58

标签: jquery datatables jquery-datatables-editor

我在ASP.Net中使用jQuery数据表编辑器。参考[here](https://editor.datatables.net/examples/simple/inTableControls.html)给出的示例,我按以下顺序包含了所有JS和CSS:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>   
<script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/media/js/dataTables.editor.min.js"></script>
<script src="JS/data_table_edit_delete.js" type="text/javascript"></script>

<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://editor.datatables.net/media/css/dataTables.editor.min.css" rel="stylesheet" />   

但我在这一行收到undefined is not a function的错误:

editor = new $.fn.dataTable.Editor({

我在datatable编辑器示例中的上述链接中给出了相同的代码。我只是从C#rater获取数据而不是PHP。当我搜索时,我发现它可能找不到javascript引用。但我所用的只是那个例子。

data_table_edit_delete.js文件中的我的js代码是:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    // console.log($.fn.dataTable.Editor); 
   // console.log($.fn.DataTable.Editor); 

    editor = new $.fn.dataTable.Editor({
        "ajax": "data_table2.aspx/BindDatatable",
            "table": "#example",
            "fields": [{
            "label": "User ID:",
                "name": "UserId"
        }, {
            "label": "User Name:",
                "name": "UserName"
        }, {
            "label": "Location:",
                "name": "Location"
        }]
    });

    // New record
    $('a.editor_create').on('click', function (e) {
        e.preventDefault();

        editor.create({
            title: 'Create new record',
            buttons: 'Add'
        });
    });

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit($(this).closest('tr'), {
            title: 'Edit record',
            buttons: 'Update'
        });
    });

    // Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.remove($(this).closest('tr'), {
            title: 'Delete record',
            message: 'Are you sure you wish to remove this record?',
            buttons: 'Delete'
        });
    });

    $('#example').DataTable({
        ajax: "data_table2.aspx/BindDatatable",
        columns: [{
            data: null,
            render: function (data, type, row) {
                // Combine the first and last names into a single table field
                return data.first_name + ' ' + data.last_name;
            }
        }, {
            data: "UserId"
        }, {
            data: "UserName"
        }, {
            data: "Location"
        }, {
            data: null,
            className: "center",
            defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
        }]
    });
});

感谢。

0 个答案:

没有答案