Question

我是jquery的新手。这是我第一次尝试jquery.datatables，它工作正常。现在我正在尝试添加更多内容 - 就像单击一个按钮（下面的代码中的刷新按钮），我想刷新网格。但是不会触发click事件。请帮忙。

@{
    Layout = "~/Views/Home/JQDataTableEditableLayout.cshtml";
}

@section head{

<script language="javascript" type="text/javascript">
    var oaddrTable;

    $(document).ready(function () {

        oaddrTable = $('#addrTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 100,
            "aLengthMenu": [[50, 100, 300, -1], [50, 100, 300, "All"]],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '/Home/AjaxIndexDataProvider',
            "bAutoWidth": true,
            "bDeferRender": true,
            "sScrollX": "100%",
            "sScrollXInner": "120%",
            "sScrollY": 500,
            "bScrollCollapse": true,

            "aoColumns": [
                                    { "sName": "AddressID", "bSearchable": false, "bSortable": false, "bVisible": false },
                                    { "sTitle": "Address Line 1", "sName": "AddressLine1", "bSearchable": false, "bSortable": true },
                                    { "sName": "AddressLine2", "bSearchable": false, "bSortable": true },
                                    { "sName": "City", "bSearchable": false, "bSortable": true,
                                        "mRender": function (data, type, full) {
                                            return '<a href="http://www.google.com.au?city=' + data + '">' + data + '</a>';
                                        }
                                    },
                                    { "sName": "PostalCode", "bSearchable": false, "bSortable": true }
                         ]

        }).makeEditable({
            "sUpdateURL": "/Home/UpdateData"
        });


        $('#Refresh').on('click', function () { alert('aaaaaaaaaaa'); });


    });           //ready


        </script>
}

<button id="Refresh" type="button">Refresh</button>
<div id="demo"  style="width:1000px;">
    <h2>Ajax example</h2>


    <button id="btnAddNewRow" value="Ok">Add new address...</button> 
    <button id="btnDeleteRow" value="cancel">Delete selected address</button>
    <table id="addrTable" class="display">
        <thead>
            <tr>
                <th>AddressID</th>
                <th>AddressLine1</th>
                <th>AddressLine2</th>
                <th>City</th>
                <th>PostalCode</th>

            </tr>
        </thead>
        <tbody> 
        </tbody>
    </table>
</div>

提前致谢。

Answer 1

我怀疑你没有包含可编辑的插件。所以对DataTables的调用有效，但是当你尝试调用makeEditable时会出现JavaScript错误。 JavaScript停止，永远不会进行$('#Refresh').on(...调用。尝试插入插件，例如：http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.editable.js

jquery datatables从按钮单击事件

1 个答案: