從DataTable中檢索數據並使用jQuery分配到對話框模式

我在DataTable中有以下數據。從DataTable中檢索數據並使用jQuery分配到對話框模式

| 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 |

當我在Action列單擊Edit，數據將在另DataTable示出的，這是在Dialog Modal，我要通過InvoiceNo所有行採取從上述DataTable數據將在Dialog Modals DataTable所示進行。我有filtered編輯上的dataTable點擊Invoice No，但dataTable中的所有行都傳遞給Dialog Modal DataTable。我想再次從DataBase中獲取DataTable的數據。任何幫助......

來源

2013-06-13 Shahid Iqbal

你使用jQuery的數據表？分享你的代碼。 –

您是否檢查過這個editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html？ –

是的jQuery數據表 –

當然在這裏你去，將其添加到文檔與數據表初始化代碼一起準備（我轉述的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 
});

所以繼承人模態的使用的一個例子，這裏的IM設置標題

$('#dialog-modal').dialog( 
    'option', 'title', passData['InvoiceNo']+' - '+passData['Fruit'] 
).dialog('open');    
});

來源

2013-06-13 13:35:49

這是用於從數據表中的數據傳遞給該對話框瓦特一個基本模態對話框初始化沒有執行另一個AJAX調用。注意：您需要在頁面上包含TableTools.js才能使打開的函數正常工作。

$("#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-02 18:49:52 NightOwlPrgmr

從DataTable中檢索數據並使用jQuery分配到對話框模式

回答

相關問題