DataTables 和 jQuery 对话框的问题答案

【问题标题】：Problems with DataTables and jQuery Dialog BoxDataTables 和 jQuery 对话框的问题
【发布时间】：2023-04-01 02:21:01
【问题描述】：

我无法让数据表 (http://datatables.net/) 在简单的 jquery 对话框中工作。当我单击一个按钮打开该框时，您可以看到数据表大约一秒钟，然后它立即关闭。任何想法都会非常感激。

我启动对话框的功能如下所示。在其中初始化数据表。

function launchLocDialog(mydiv) {
    alert(mydiv);
    var oTable;
    var giRedraw = false;

    $(document).ready(function() {
        $("#table_id tbody").click(function(event) {
            $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
            });

            $(event.target.parentNode).addClass('row_selected');
        });

        oTable = $('#table_id').dataTable( {
            "aaData": [ /* Reduced data set */
                [ "1", "02/22/12"],
                [ "2", "02/22/12"],
                [ "3", "02/22/12"],
                [ "4", "02/22/12"],
                [ "5", "02/22/12"],
                [ "6", "02/22/12"], 
                [ "7", "02/22/12"],
                [ "8", "02/22/12"],
                [ "9", "02/22/12"],
                [ "10", "02/22/12"],
                [ "11", "02/22/12"],
                [ "12", "02/22/12"],
            ],
            "aoColumns": [
                { "sTitle": "Number" },
                { "sTitle": "Date Start" }
            ]
        });  

        oTable.$('td').click( function () {
            //var anSelected = fnGetSelected(oTable);
            var sData = oTable.fnGetData(0,0);
            //alert( 'The cell clicked on had the value of '+sData );
            alert(sData);

            //$.post('intsum.php', {intsumID: sData});

            // window.location = "intsum.php";
        });

    });

    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog" ).dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

【问题讨论】：

我强烈建议您查看 slickGrid

标签： javascript jquery jquery-ui datatables

【解决方案1】：

只是想为此设置一些测试，但没想到……您的命名函数中有一个文档就绪函数。我无法测试它的全部含义，但这通常不是完成的事情。

使用文档准备触发需要等待 DOM 可编写脚本的函数正是设置 oTable 所需要的；但是，我认为将它嵌套在一个被调用的命名函数中（在某些时候......该部分代码在示例中不可见）似乎会产生意想不到的后果。

更新：

我试图稍微整理一下代码中的一些怪癖（一些额外的大括号，错位的逗号，但其中大部分可能是由于试图提供一个简短的示例），但大部分都归结为到时间。

随着代码时序或多或少如上所示，表格不会出现。当然，您甚至必须调用“launchLocDialog()”才能抱有希望，但我认为也不是这样（这可能只是示例中缺少的）。无论如何，去掉包装函数并将所有内容放入 window.onLoad 或文档就绪函数中，表格本身似乎可以工作：

http://live.datatables.net/exinum/4/edit#preview

您在代码中看不到文档就绪功能，因为 JSBin 在窗口 onLoad 运行它的代码，所以它是多余的。在您的代码中，您可以使用其中的一种。

所以，问题变成了：

预期的行为是什么？表格是否应该出现在对话框中？弹出对话框的事件绑定在哪里？在原始的 launchLocDialog 函数中，您似乎可以传递“myDiv”，但我不确定它的作用是什么，因为它稍后没有被引用。

【讨论】：