1

我在 DataTable 中有以下数据。

| InvoiceNo |  Fruits   |     Date     | Description | Action |
---------------------------------------------------------------
|   001     |   Apple   | Jun 12, 2012 |      -      | Edit   |
|   001     |   Banana  | Jun 12, 2012 |      -      | Edit   |
|   001     |   Mango   | Jun 12, 2012 |      -      | Edit   |
|   002     |   Apples  | Jun 12, 2012 |      -      | Edit   |
|   002     |   Mango   | Jun 12, 2012 |      -      | Edit   |

当我单击Edit列时Action，数据将显示在另一个DataTable中Dialog Modal，我想从上面获取数据，DataTable所有InvoiceNo行都将显示在Dialog Modals DataTable。我filtered在 Edit click by 上有 dataTable Invoice No，但 dataTable 中的所有行都传递给Dialog Modal DataTable. 我想再次从 DataTable 中获取数据，而不是从 DataBase 中获取数据。任何帮助...

4

2 回答 2

2

当然可以，将它与数据表初始化代码一起添加到准备好的文档中（我解释了 html 元素，因为我不知道你的源 html 设置是什么）使用 jquery 1.9

$(document).ready(function() {
    var passData ={}; //if you want the table array to be global

$(document).on("click", "#yourtableID tbody tr #edit", function(){
    var nTr = this; 
    var aPos = oTable.fnGetPosition(this);

    var aData = oTable.fnGetData(aPos); //if you want the table array to be local
    passData = aData;
    console.log(aData); //view console to see entire row object
    alert(aData['InvoiceNo']); //if your data is key:value
    alert(aData[1]); //if your table is without keys
});

所以这里有一个模态用法的例子，这里我设置标题

$( '#dialog-modal' ).dialog( 
  'option', 'title', passData['InvoiceNo']+' - '+passData['Fruit'] 
  ).dialog( 'open' );               
});
于 2013-06-13T13:35:49.697 回答
0

这是一个基本的模态对话框初始化，用于将数据从数据表传递到对话框，而无需执行另一个 AJAX 调用。注意：您需要在页面中包含 TableTools.js 才能使 open 功能正常工作。

$("#your-dialog-id").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 450,
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    open: function() {
        var aVariable = TableTools.fnGetInstance('yourDataTableName').fnGetSelectedData()[0];

        $(this).find("input[name=input1]").val(aVariable.INVOICE_NO);
        $(this).find("input[name=input1]").val(aVariable.FRUITS);
        $(this).find("input[name=input2]").val(aVariable.DATE);
        $(this).find("input[name=input3]").val(aVariable.DESCRIPTION);
        $(this).find("input[name=input3]").val(aVariable.ACTION);
    }
});

要打开此对话框，您可以执行以下操作：

$("#yourDataTableName tbody").on( 'dblclick', 'tr:not(:has(td.dataTables_empty))', function (e) {
        TableTools.fnGetInstance('yourDataTableName').fnSelect(this);
        $("#your-dialog-id").dialog("open");
});
于 2014-07-02T18:49:52.323 回答