在客户端添加jquery数据表行的问题

时间:2018-08-19 20:48:23

标签: jquery datatables

我需要你的帮助。

我正在使用jquery数据表,并且在添加行时遇到问题。

这是我的html代码:

...
    <div>
        <a href="#modal-form" role="button" data-toggle="modal">New user</a>
    </div>
    <table id="dynamic-table" role="grid">
        <thead>
            <tr role="row">
                <th class="center sorting_disabled"><input class="ace" type="checkbox"></th>
                <th class="sorting">ID</th>
                <th class="sorting">First name</th>
                <th class="sorting">Second name</th>
                <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" class="odd selected">
                <td class="center"><input class="ace" type="checkbox"></td>
                <td>1</td>
                <td>Adam</td>
                <td>Duritz</td>
                <td><a href="#modal-form" role="button" data-toggle="modal">Edit</a></td>
            </tr>
        </tbody>
    </table>
    ...

同时单击两个href时,将打开一个模式表格,用于新记录和编辑行。模态形式中有一个保存按钮。

这是我的jquery代码:

jQuery(function($) {

        //initiate dataTables plugin
        var myTable =
        $('#dynamic-table')
        .DataTable({
            bAutoWidth: false,
            "aoColumns": [
                null,
                null,
                null
            ],
            "aaSorting": [],
            select: {
                style: 'multi'
            }
        });

        // handler href click (for new row and edit), open modal form
        $('a[href="#modal-form"]').click(function () {
            // code ....
        });

        // handler save button click in modal form
        $("#btnSaveDetail").click(function () {
            myTable.row.add([
                '<input class="ace" type="checkbox">',
                $('#cph_main_rec_id').val(),
                $('#cph_main_txt_fname').val(),
                $('#cph_main_txt_sname').val(),
                '<a href="#modal-form" role="button" data-toggle="modal">Edit</a>')
                .nodes()
                .to$()
                .attr('role', 'row')
                .find('td:eq(0)')
                .addClass('center');

            myTable.draw();
            $('#modal-form').modal('hide');
        })
    })

在客户端添加行的引用代码正常工作,添加并显示新行(显示html代码,新行正确)。

但是,当我单击编辑按钮时,不会调用href处理程序。 我在做错什么吗?

感谢那些可以帮助我的人。 毛罗(Mauro)

0 个答案:

没有答案