2

我想通过单击数据表中的一行来调用模式表单来创建“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 )
});
4

1 回答 1

6

稍作睡眠和再次尝试产生了一个解决方案，该解决方案至少解决了 Datatable Dialog 问题，我不得不假设我遇到的任何其他问题都存在于我包含的其他加载项中。所以对我来说这已经解决了。

这篇文章的答案是 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");                
            });
于 2013-07-06T15:53:32.787 回答