如何从Datatables行调用模态对话框 - 似乎与Jquery UI有冲突

Question

我想通过单击Datatables中的一行来调用模态表单来创建"CRUD"函数.

我已经花了几个小时遍历我的代码的每一步,似乎我的JQ-UI和Datatables之间出现了冲突.我找到了几个例子,包括"实时"函数的Datatables示例,您可以在其中初始化表并调用简单的jquery函数.

我正在使用:

• code.jquery.com/jquery-1.9.1.js
• code.jquery.com/ui/1.10.2/jquery-ui.js
• ../DataTables-1.9.4/media/js/jquery.dataTables.js

这个例子将给我光标,然后使表"跳过"页面.有没有人有可以尝试的工作实例或小提琴？

function openDialog() {
    $("#dialog-modal").dialog({
        height: 140,
        modal: true
    });
}

/* Init DataTables */
$('#example').dataTable();

/* Add events */
$('#example tbody tr').on('click', function () {

    $('#example tbody tr').css('cursor', 'pointer');
    var sTitle;
    var nTds = $('td', this);
    var sBrowser = $(nTds[1]).text();
    var sGrade = $(nTds[4]).text();
    /*
    if (sGrade == "A")
        sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
    else if (sGrade == "C")
        sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
    else if (sGrade == "X")
        sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
    else
        sTitle = sBrowser + ' will provide an undefined level of CSS support.';
     */
    openDialog();

    //alert( sTitle )
});

Answer 1

一点点睡眠和另一次尝试产生了一个解决方案,至少解决了数据表对话问题,我将不得不假设我遇到的任何其他问题都是我包含的其他插件.所以对我来说这已经解决了.

在这篇文章中答案是99%- 感谢作者的伟大工作实例.

我修改了他们的链接解决方案,结合Datatables"实时"解决方案示例和变量,并能够成功地将数据传递到工作对话框,该工作对话框与前面的链接解释一样.

这个设置允许我创建JQuery-UI模态表单,从mySQL表列传递ID,并执行处理我需要的服务器端PHP CRUD函数的表单.

(除了花时间确定它有效之外,我不能相信这一点.)

这个工作示例直接来自Datatables的"实时事件"示例,如果删除sAjaxsource并使用普通的Datatable,则应该很容易插入.

  $('#example').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "bStateSave": true,
                "sPaginationType": "full_numbers",
                "sAjaxSource": " /*your data source page here*/ "           
            } );

             /* Add events */
            $("body").on("click", "#example tbody tr", function (e) {
                 e.preventDefault();                    

                var nTds = $('td', this);
                //example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
                var sBrowser = $(nTds[1]).text();
                var sGrade = $(nTds[4]).text();
                var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
                var targetUrl = $(this).attr("href");

                $('#table-dialog').dialog({
                  buttons: {
                    "Delete": function() {
                        window.location.href = targetUrl;
                    },
                    "Cancel": function() {
                      $(this).dialog("close");
                    }
                  }
                });                 
                //simple dialog example here
                $('#table-dialog').text(dialogText ).dialog("open");                
            });