4

我试图让jQuery dataTable以这样一种方式运行，即用户可以选择一行然后单击一个按钮（位于页面上的其他位置，但不在表格上或其中）并弹出一个 JS 警报。

这是我的数据表：

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    // Commenting out next line
    //"sDom" : 't',
    "sAjaxSource" : "some/url/on/my/server",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "asking",
            "value" : "yes"
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "name"
        },
        {
            "mDataProp" : "expr"
        },
        {
            "mDataProp" : "seq"
        }
    ]
});

这是我的按钮：

<div id="bam-btn-div">
    <input type="button" id="bam-btn" value="BAM!" onclick="bam();"/>
</div>

当用户在 dataTable 中选择一行，然后单击按钮时，我希望调用以下函数：

function bam() {
    alert("Deleting the selected row");

    // Delete the selected row in the dataTable
}

最后，jQuery dataTable 试图填充的 HTML 表：

<div id="datatable-div">
    <table id="optconfig-datatable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Expression</th>
                <th>Sequence</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

我尝试按照此处的示例进行操作，但无法正常工作。任何人都可以发现我需要添加哪些配置（到 dataTable 和/或其他）？提前致谢！

4

4 回答 4

3

您正在使用 jQuery，您不妨保持正轨。

$('#bam-btn').on('click', function(){
    alert("BAM!");
});

附带说明一下，ID 必须是唯一的，但我相信您知道这一点，因此请确保您不要一遍又一遍地重复使用相同的 ID。

此外，如果此元素在执行后添加到 DOM 中.ready()，则需要将事件处理程序附加到静态父元素，以便它可以正确委托 click 事件。

$(document).on('click', '#bam-btn', function(){
    alert("BAM");
});

我将保留上述内容，我不想删除我的答案的整个部分，因为您永远不知道将来谁会觉得它有帮助

首先，我们需要创建一个可用于所有函数的所有作用域的变量。这样，我们可以引用变量来获取我们想要删除的元素。

我们应该将此变量放在文档就绪函数之外

var theRow = '';
$(document).ready(function(){ 
    //existing code here
});

现在我们已经准备好一个“全局范围”变量，我们可以随时修改和访问它。

var theRow = '';
$(document).ready(function(){ 
    $('tr').click(function(){
        //we need to store a unique piece of information about this row.
        //Without much to go on, I'm going to rely on the index.
        theRow = $(this).index();
    });

    $('#bam-btn').click(function(){
       $('tr').eq(theRow).remove(); 
    });
});​

这是你体面的工作 jsFiddle 作为一个例子

对于未来的用户，以及其他可能觉得这很有用的人

:eq()jQuery 提供的选择器无法利用.querySelectorAll()来获得相当大的性能提升。因此，暂时，您应该始终使用.eq()over :eq()。

于 2012-10-17T02:32:59.673 回答
2

请检查您的：

function bam() {
    alert("BAM!");
}

不在此声明中：

$(document).ready(function() {
    // STATEMENT
});

如果您的函数在 中$(document).ready()，则意味着它仅在该范围内可用，在特定的function().

将代码移动到$(document).ready()语句的上方或下方，onclick按钮中的事件处理程序将能够找到并调用它。

要从数据表中删除特定元素，请尝试使用以下 JavaScript：

$(document).ready(function() {
    var oTable = $("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });$("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });

    $('button#bam-btn').on('click', function() {
        var anSelected = fnGetSelected( oTable );
        oTable.fnDeleteRow( anSelected[0] );
    } );
});
于 2012-10-17T02:29:36.300 回答
0

我对动态数据加载的表也有类似的问题。每次我添加内容时，旧节点都会消失，失去链接的事件。我解决了数据加载后调用函数的问题：

    function insertevents(table_id){
        var oTable = jQuery('#'+tableid).dataTable( {"bRetrieve": true });
        oTable.$('tr').click(function(){
            jQuery(this).toggleClass('row_selected');
        } );
        // Extra code here
    }

添加“bRetrieve”参数很重要，因为该表之前已初始化。

此外，我还改进了控制键盘事件以实现可访问性的功能：

        oTable.$('tr').keyup( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault();
                jQuery(this).toggleClass('row_selected');
            }       
        } ); 
        oTable.$('tr').keydown( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault(); // Desactivamos este efecto
            }
        });

这一堆行应该替换第一个示例的注释行。现在可以通过键盘使用表格，使用 intro 或空格键进行选择。记得给表格中插入的元素添加 tabindex=0，这样我们就可以使用 tab 键导航。

于 2013-06-20T08:04:16.523 回答
0

http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html

这与您想要的相似。

于 2013-06-21T20:02:16.293 回答