0

我是 jquery 的新手。这是我第一次尝试 jquery.datatables 并且效果很好。现在我正在尝试向它添加更多内容 - 比如如果单击按钮(下面代码中的刷新按钮),我想刷新网格。但是点击事件不会被触发。请帮忙。

@{
    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>

提前致谢。

4

1 回答 1

0

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

于 2013-06-26T13:20:40.207 回答