Question

我在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中，我想从上面{{1}获取数据1}} DataTable所有行都会显示在InvoiceNo中。我在编辑时Dialog Modals DataTable数据表点击了filtered，但是来自dataTable的所有行都传递给Invoice No。我想从DataTable获取数据而不是再次从DataBase获取数据。任何帮助...

Answer 1

当然，你去，将其与数据表初始化代码一起添加到文档中（我解释了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' );               
});

Answer 2

这是一个基本的模态对话框初始化，用于将数据从数据表传递到对话框，而不执行另一个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");
});

从DataTable中检索数据并使用jQuery分配给Dialog Modal

2 个答案: