logo标签列表

jQuery数据表和选择行

javascriptjquerydatatables
4
我将尝试让 jQuery dataTable 在用户选择一行后，可以点击页面上其他位置的按钮（不在表格内或其中），并弹出 JS 警告框。
这是我的 dataTable：
$("#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>

当用户在数据表中选择一行，然后单击按钮时，我希望调用以下函数：
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个回答
3

你正在使用jQuery，你可能想继续使用它。

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

顺便提一下，ID必须是唯一的，但我相信你已经知道了，所以确保你不要试图一遍又一遍地重复使用同一个ID。

此外，如果这个元素在.ready()执行之后添加到DOM中，你需要将事件处理程序附加到静态父元素上，这样它才能正确地委派点击事件。

$(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() 而非 :eq()。

非常抱歉，请查看我编辑过的Javascript代码 - 我实际上想删除选定的行，而不仅仅是显示警告。这是我的疏忽。 - IAmYourFaja
没问题。我们只需要将点击功能委托给行，然后可以正确地从DOM中移除该行。你能给我展示一下单行生成的标记吗？那样我就可以帮你了。 - Ohgodwhy
@pnongrata 请查看我更新的答案，并附上了jsFiddle。这应该可以直接使用，但是您可能需要对我选择的选择器进行一些更改，因为它们有歧义。 - Ohgodwhy
刚刚添加了HTML表格 - 希望这就是你要找的，再次感谢你迄今为止的帮助。 - IAmYourFaja
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] );
    } );
});
非常抱歉，请查看我编辑过的Javascript代码 - 实际上我想要删除选定的行，而不仅仅是显示警告。这是我的疏忽。 - IAmYourFaja
@pnongrata，我已经更新了我的答案。请检查是否适用于您，并在解决您的问题后接受我的答案 :) - user1386320
我认为你的方法可能更好。我没有利用dataTables函数来执行我的操作。这可能会影响性能，但我总是尽可能地在使用的API范围内进行尝试。+1，如果这对OP有效，他应该接受它而不是我的建议。 - Ohgodwhy
我大约2-3年前使用过dataTables，我记得当我处理类似问题时，插件在访问与插件相关的某些属性和方法方面存在缺点，正如您可以从我的删除解决方案中看到的那样 :) 保持良好的工作！ - user1386320
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
            }
        });

这些代码行应替换第一个示例中的注释行。现在，可以使用键盘从表格中进行选择，使用回车或空格键进行选择。请记得在插入到表格中的元素中添加tabindex=0，以便我们可以使用Tab键进行导航。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接